/* ════════════════════════════════════════════════════════════════════════════════════════════════
   /trades (tools/trades.py, tools/trades.js): every trade Handyman coordinates, a tab per trade
   ════════════════════════════════════════════════════════════════════════════════════════════════
   The approved mockup (2026-10-17) in the site's own tokens: Funnel Display and Funnel Sans, --base / --base-tint /
   --t-*, the violet accent ink, and the light and dark switch. Cards float; a picture or loop sits flush in its card
   and takes its rounding. A phone gets one row of pills that sticks and scrolls sideways; a computer sees every pill. */

.hm-tr-main {
  --tr-card: var(--base-tint);
  --tr-line: color-mix(in srgb, var(--t-bright) 9%, transparent);
  --tr-line-strong: color-mix(in srgb, var(--t-bright) 18%, transparent);
  --tr-sunk: color-mix(in srgb, var(--t-bright) 4%, transparent);
  --tr-ink: var(--hm-accent-ink, #6b55cf);
  --tr-ink-soft: rgba(159, 139, 231, .16);
  --tr-go: #4f8a2b;
  --tr-shadow: 0 0 0 1px rgba(22, 22, 22, .05), 0 1rem 2.8rem -1.6rem rgba(22, 22, 22, .28);
  --tr-art: #f4f5f6;   /* the renders' own light ground, behind a poster still on its way */
  --tr-r: 2.8rem;
}
[color-scheme="dark"] .hm-tr-main {
  --tr-line: rgba(255, 255, 255, .09);
  --tr-line-strong: rgba(255, 255, 255, .18);
  --tr-sunk: rgba(255, 255, 255, .04);
  --tr-ink: #DDF160;
  --tr-ink-soft: rgba(221, 241, 96, .12);
  --tr-go: #9fd46d;
  --tr-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 1.2rem 3rem -1.8rem rgba(0, 0, 0, .8);
  --tr-art: #e9eaeb;
}
.hm-tr-main section { min-width: 0; }   /* Rayo's 360 px minimum on every <section> would scroll a 360 px phone sideways */
.hm-tr-main :focus-visible { outline: 2px solid var(--tr-ink); outline-offset: 2px; }
.hm-tr { padding: 13rem 0 2rem; }

/* ── the head ─────────────────────────────────────────────────────────────────────────────────── */
.hm-tr-head { padding-bottom: 2.4rem; }
.hm-tr-kicker {
  display: inline-flex; align-items: center; gap: .9rem; margin: 0 0 1.4rem;
  font: 600 1.3rem/1.2 var(--_font-default); letter-spacing: .14em; text-transform: uppercase; color: var(--tr-ink);
}
.hm-tr-kicker__dot { width: .9rem; height: .9rem; border-radius: 50%; background: #67bb3a; box-shadow: 0 0 0 .4rem rgba(103, 187, 58, .22); }
.hm-tr-title { margin: 0; max-width: 18ch; font: 600 clamp(4.2rem, 6.4vw, 8.8rem)/.98 var(--_font-accent); letter-spacing: -.04em; color: var(--t-bright); }
.hm-tr-intro { margin: 1.8rem 0 0; max-width: 62ch; font: 400 1.8rem/1.5 var(--_font-default); color: var(--t-medium); }

/* ── the pills ────────────────────────────────────────────────────────────────────────────────── */
/* A computer sees every pill at once, so the row stays where it is; a phone's one row sticks (below). */
.hm-tr-bar { position: relative; z-index: 20; padding: 1.2rem 0; }
.hm-tr-tabs { display: flex; flex-wrap: wrap; gap: .8rem; }
.hm-tr-tab {
  flex: none; display: inline-flex; align-items: center; gap: .8rem; min-height: 4.4rem; padding: .5rem 1.4rem .5rem .5rem;
  border-radius: 99rem; background: var(--tr-card); box-shadow: var(--tr-shadow); text-decoration: none;
  font: 600 1.4rem/1 var(--_font-default); color: var(--t-bright); white-space: nowrap; transition: background-color .2s ease, color .2s ease;
}
.hm-tr-tab img { width: 3.4rem; height: 3.4rem; border-radius: 50%; object-fit: cover; background: var(--tr-art); }
.hm-tr-tab i { font-style: normal; font-weight: 500; font-size: 1.2rem; color: var(--t-muted); }
.hm-tr-tab:hover { color: var(--t-bright); }
.hm-tr-tab.is-on { background: var(--base-opp); color: var(--base); }
.hm-tr-tab.is-on i { color: inherit; opacity: .65; }
.hm-tr-tabs__sep { flex: none; width: 1px; align-self: stretch; margin: .4rem; background: var(--tr-line-strong); }

/* ── a tab ────────────────────────────────────────────────────────────────────────────────────── */
/* No scroll anchoring: a tab swap replaces the content under the window, and the browser's anchoring then moved the
   page away from where trades.js put it */
.hm-tr-panels { overflow-anchor: none; }
.hm-tr-panel { padding-top: 2rem; }
.hm-tr-panel[hidden] { display: none; }
.hm-tr-hero { display: grid; gap: 2.4rem; align-items: center; }
.hm-tr-hero__art { position: relative; overflow: hidden; border-radius: var(--tr-r); background: var(--tr-art); box-shadow: var(--tr-shadow); }
.hm-tr-hero__art video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hm-tr-hero__t { margin: 0; font: 600 clamp(3.8rem, 4.6vw, 6.4rem)/1 var(--_font-accent); letter-spacing: -.04em; color: var(--t-bright); }
.hm-tr-lede { margin: 1.4rem 0 0; font: 400 1.7rem/1.5 var(--_font-default); color: var(--t-medium); }
.hm-tr-stats { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.8rem 0 0; padding: 0; list-style: none; }
.hm-tr-stats li { padding: .7rem 1.2rem; border-radius: 99rem; background: var(--tr-card); box-shadow: var(--tr-shadow); font-size: 1.4rem; color: var(--t-medium); }
.hm-tr-stats b { color: var(--t-bright); font-weight: 700; }
.hm-tr-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.8rem; margin: 2.4rem 0 0; }
.hm-tr-from { display: flex; flex-direction: column; gap: .2rem; margin: 0; }
.hm-tr-from b { font: 600 1.6rem/1.2 var(--_font-default); color: var(--tr-go); }
.hm-tr-from span { font-size: 1.3rem; color: var(--t-muted); }

.hm-tr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .8rem; min-height: 4.8rem; padding: 0 2.4rem;
  border-radius: 99rem; background: var(--base-opp); color: var(--base) !important; font: 600 1.6rem/1 var(--_font-default);
  text-decoration: none; white-space: nowrap; transition: transform .2s ease;
}
.hm-tr-btn:hover { transform: translateY(-1px); }
.hm-tr-btn i { font-size: 1.7rem; }
.hm-tr-btn--accent { background: #6b55cf; color: #fff !important; }
[color-scheme="dark"] .hm-tr-btn--accent { background: var(--accent); color: #161616 !important; }
.hm-tr-btn--line { background: transparent; color: inherit !important; box-shadow: inset 0 0 0 1.5px currentColor; }

.hm-tr-sechead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .6rem 2rem; margin: 5.6rem 0 1.4rem; }
.hm-tr-sechead h3 { margin: 0; font: 600 clamp(2.8rem, 3vw, 3.8rem)/1.05 var(--_font-accent); letter-spacing: -.03em; color: var(--t-bright); }
.hm-tr-sechead p { margin: 0; max-width: 60ch; font-size: 1.4rem; color: var(--t-medium); }
.hm-tr-sub { display: flex; align-items: baseline; gap: .8rem; margin: 2.8rem 0 1.2rem; font: 600 2rem/1.2 var(--_font-accent); letter-spacing: -.02em; color: var(--t-bright); }
.hm-tr-sub span { font: 600 1.3rem/1 var(--_font-default); color: var(--t-muted); }

/* the jobs: each with its approved Pick picture, a link that opens its popup */
.hm-tr-jobs { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); }
.hm-tr-jobs > li { display: flex; min-width: 0; }
.hm-tr-job {
  flex: 1 1 auto; display: grid; grid-template-columns: 5.6rem 1fr; grid-template-rows: auto auto; column-gap: 1.2rem; align-items: center;
  min-height: 7.2rem; padding: .8rem 1.2rem .8rem .8rem; border-radius: 1.8rem; background: var(--tr-card); box-shadow: var(--tr-shadow);
  width: 100%; border: 0; font: inherit; text-align: left; color: inherit; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease;
}
.hm-tr-job:hover { transform: translateY(-2px); box-shadow: 0 0 0 1.5px var(--tr-ink-soft), var(--tr-shadow); }
.hm-tr-job img, .hm-tr-job__blank { grid-row: 1 / 3; width: 5.6rem; height: 5.6rem; border-radius: 1.2rem; object-fit: cover; background: var(--tr-art); }
.hm-tr-job__t { align-self: end; font: 600 1.45rem/1.25 var(--_font-default); color: var(--t-bright); }
.hm-tr-job__p { align-self: start; margin-top: .2rem; font: 600 1.35rem/1.3 var(--_font-default); color: var(--tr-go); }
.hm-tr-job__p.is-q { color: var(--t-muted); font-weight: 500; }

/* More trades */
.hm-tr-more { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 28rem), 1fr)); }
.hm-tr-more li { display: grid; grid-template-columns: 6.4rem 1fr; column-gap: 1.2rem; align-content: center; padding: 1rem; border-radius: 1.8rem; background: var(--tr-card); box-shadow: var(--tr-shadow); }
.hm-tr-more img { grid-row: 1 / 4; width: 6.4rem; height: 6.4rem; border-radius: 1.4rem; object-fit: cover; background: var(--tr-art); }
.hm-tr-more b { font: 600 1.5rem/1.3 var(--_font-default); color: var(--t-bright); }
.hm-tr-more span { font-size: 1.35rem; line-height: 1.35; color: var(--t-medium); }
.hm-tr-more em { font-style: normal; font-size: 1.25rem; font-weight: 600; color: var(--t-muted); }

/* the guides */
.hm-tr-guides { display: grid; gap: 1.4rem; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hm-tr-guide a { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 1.8rem; background: var(--tr-card); box-shadow: var(--tr-shadow); text-decoration: none; }
.hm-tr-guide__media { display: block; aspect-ratio: 3 / 2; background: var(--tr-art); }
.hm-tr-guide__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hm-tr-guide__k { display: block; padding: 1.2rem 1.4rem 0; font: 600 1.2rem/1.2 var(--_font-default); letter-spacing: .1em; text-transform: uppercase; color: var(--tr-ink); }
.hm-tr-guide b { display: block; padding: .4rem 1.4rem 0; font: 600 1.7rem/1.25 var(--_font-accent); letter-spacing: -.01em; color: var(--t-bright); }
.hm-tr-guide small { display: block; margin-top: auto; padding: .6rem 1.4rem 1.4rem; font-size: 1.25rem; color: var(--t-muted); }
.hm-tr-all { margin: 1.6rem 0 0; }
.hm-tr-all a { display: inline-flex; align-items: center; gap: .6rem; min-height: 4.4rem; font: 600 1.6rem/1 var(--_font-default); color: var(--tr-ink); text-decoration: none; }
.hm-tr-all a i { transition: transform .2s ease; }
.hm-tr-all a:hover i { transform: translateX(.3rem); }

/* the band at a tab's foot */
.hm-tr-band { display: grid; gap: 1.8rem; align-items: center; margin: 5.6rem 0 0; padding: 2.6rem; border-radius: var(--tr-r); background: var(--base-opp); color: var(--base); }
.hm-tr-band h3 { margin: 0; font: 600 clamp(2.6rem, 3.4vw, 4rem)/1.05 var(--_font-accent); letter-spacing: -.03em; color: inherit; }
.hm-tr-band p { margin: .8rem 0 0; max-width: 56ch; font-size: 1.6rem; color: inherit; opacity: .75; }
.hm-tr-band .hm-tr-band__k { margin: 0 0 .8rem; font: 600 1.3rem/1.2 var(--_font-default); letter-spacing: .14em; text-transform: uppercase; color: #9f8be7; opacity: 1; }
[color-scheme="dark"] .hm-tr-band .hm-tr-band__k { color: #6b55cf; }
.hm-tr-band__b { display: flex; flex-wrap: wrap; gap: 1rem; }

@media (min-width: 768px) {
  .hm-tr-guides { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .hm-tr-hero { grid-template-columns: 1.3fr 1fr; gap: 4.8rem; }
  .hm-tr-band { grid-template-columns: 1fr auto; padding: 3.4rem 4rem; }
}

/* ── a job's popup (trades.js): the answer deck's card in the site's own look ───────────────────────────────────────
   A violet card (the founder's popup standard, 2026-10-16): a mono eyebrow with the job's place in its tab, the job's
   own picture big and flush, the price, rows that each say what they mean, the guides, and Book this. A computer gets
   it centred, the picture beside the words; a phone gets it as a sheet from the bottom. The page under it never moves:
   only the card's middle scrolls. */
html.hm-trp-open { overflow: hidden; }
.hm-trp {
  --trp-bg: #fbfaff; --trp-tint: #f1edff; --trp-ink: #6b55cf; --trp-ink-2: #4b3aa6; --trp-line: rgba(107, 85, 207, .16);
  --trp-t: #17141f; --trp-m: #575168; --trp-mute: #857f96; --trp-go: #2f7d1e; --trp-art: #f4f5f6;
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 2.4rem;
  border: 0; background: transparent; color: var(--trp-t); display: none; align-items: center; justify-content: center; overflow: hidden;
}
.hm-trp[open] { display: flex; }
.hm-trp::backdrop { background: rgba(18, 14, 34, .52); backdrop-filter: blur(3px); }
[color-scheme="dark"] .hm-trp {
  --trp-bg: #1b1729; --trp-tint: #262040; --trp-ink: #b9a9ff; --trp-ink-2: #d8ceff; --trp-line: rgba(185, 169, 255, .18);
  --trp-t: #f4f1ff; --trp-m: #c3bdd6; --trp-mute: #948dab; --trp-go: #9fd46d; --trp-art: #e9eaeb;
}
[color-scheme="dark"] .hm-trp::backdrop { background: rgba(0, 0, 0, .66); }
.hm-trp__card {
  position: relative; display: flex; flex-direction: column; width: min(100%, 104rem); max-height: min(100%, 76rem); overflow: hidden;
  border-radius: 2.8rem; background: linear-gradient(180deg, var(--trp-tint), var(--trp-bg) 9rem); color: var(--trp-t);
  box-shadow: 0 0 0 1px var(--trp-line), 0 3rem 8rem -2rem rgba(30, 18, 80, .45); animation: hm-trp-in .32s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes hm-trp-in { from { opacity: 0; transform: translateY(1.6rem) scale(.98); } to { opacity: 1; transform: none; } }
.hm-trp__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.4rem 1.4rem 1rem 2.4rem; }
.hm-trp__k { display: inline-flex; align-items: center; gap: .9rem; margin: 0; min-width: 0;
  font: 600 1.2rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; color: var(--trp-ink); }
.hm-trp__k span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-trp__live { flex: none; width: .8rem; height: .8rem; border-radius: 50%; background: var(--trp-ink); box-shadow: 0 0 0 .4rem var(--trp-line); }
.hm-trp__nav { display: flex; gap: .6rem; flex: none; }
.hm-trp__ic { display: grid; place-items: center; width: 4.4rem; height: 4.4rem; padding: 0; border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--trp-ink) 10%, transparent); color: var(--trp-ink-2); font-size: 1.8rem; cursor: pointer; transition: background-color .2s ease; }
.hm-trp__ic:hover { background: color-mix(in srgb, var(--trp-ink) 18%, transparent); }
.hm-trp :focus-visible { outline: 2px solid var(--trp-ink); outline-offset: 2px; }
.hm-trp__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; grid-auto-rows: max-content; gap: 2.4rem;
  padding: .4rem 2.4rem 2.4rem; scrollbar-width: thin; }
.hm-trp__pic { position: relative; margin: 0; aspect-ratio: 1360 / 700; overflow: hidden; border-radius: 2rem; background: var(--trp-art); }
.hm-trp__pic img, .hm-trp__pic video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hm-trp__copy { min-width: 0; }
.hm-trp__src { margin: 0 0 .6rem; font: 500 1.35rem/1.3 var(--_font-default); color: var(--trp-mute); }
.hm-trp__t { margin: 0; font: 600 clamp(2.8rem, 3.2vw, 4rem)/1.04 var(--_font-accent); letter-spacing: -.03em; color: var(--trp-t); text-wrap: balance; }
.hm-trp__t:focus { outline: none; }
.hm-trp__d { margin: 1rem 0 0; font: 400 1.6rem/1.5 var(--_font-default); color: var(--trp-m); }
.hm-trp__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.2rem; margin: 1.8rem 0 0; }
.hm-trp__price b { font: 600 2.6rem/1.1 var(--_font-accent); letter-spacing: -.02em; color: var(--trp-go); }
.hm-trp__price.is-q b { color: var(--trp-t); }
.hm-trp__price span { font-size: 1.35rem; color: var(--trp-mute); }
.hm-trp__chips { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.2rem 0 0; }
.hm-trp__chips span { padding: .5rem 1.1rem; border-radius: 99rem; background: color-mix(in srgb, var(--trp-ink) 9%, transparent);
  font: 600 1.25rem/1.3 var(--_font-default); color: var(--trp-ink-2); }
.hm-trp__rows { display: grid; gap: .8rem; margin: 2rem 0 0; }
.hm-trp__row { display: grid; grid-template-columns: 2.4rem 1fr; gap: 1rem; align-items: start; padding: 1.2rem 1.4rem;
  border-radius: 1.6rem; background: var(--trp-bg); box-shadow: inset 0 0 0 1px var(--trp-line); }
.hm-trp__row p { margin: 0; }
.hm-trp__row b { display: block; font: 600 1.45rem/1.3 var(--_font-default); color: var(--trp-t); }
.hm-trp__row small { display: block; margin-top: .3rem; font-size: 1.35rem; line-height: 1.45; color: var(--trp-m); }
.hm-trp__dot { position: relative; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: color-mix(in srgb, var(--trp-ink) 12%, transparent); }
.hm-trp__dot::after { content: ""; position: absolute; inset: .8rem; border-radius: 50%; background: var(--trp-ink); }
.hm-trp__row[data-k="yes"] .hm-trp__dot { background: color-mix(in srgb, var(--trp-go) 16%, transparent); }
.hm-trp__row[data-k="yes"] .hm-trp__dot::after { background: var(--trp-go); }
.hm-trp__row[data-k="no"] .hm-trp__dot::after { inset: 1.1rem .7rem; border-radius: .2rem; }
.hm-trp__guides { margin: 2.2rem 0 0; }
.hm-trp__h { margin: 0 0 .8rem; font: 600 1.2rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--trp-ink); }
.hm-trp__guide { display: grid; grid-template-columns: 6.4rem 1fr auto; gap: 1.2rem; align-items: center; min-height: 6.4rem; margin-top: .8rem;
  padding: .6rem 1.4rem .6rem .6rem; border-radius: 1.6rem; background: var(--trp-bg); box-shadow: inset 0 0 0 1px var(--trp-line);
  color: var(--trp-t); text-decoration: none; transition: box-shadow .2s ease; }
.hm-trp__guide:hover { box-shadow: inset 0 0 0 1.5px var(--trp-ink); }
.hm-trp__guide img, .hm-trp__guide > span:first-child { width: 6.4rem; height: 4.8rem; border-radius: 1rem; object-fit: cover; background: var(--trp-art); }
.hm-trp__guide b { display: block; font: 600 1.45rem/1.3 var(--_font-default); }
.hm-trp__guide small { display: block; margin-top: .2rem; font-size: 1.25rem; color: var(--trp-mute); }
.hm-trp__guide i { color: var(--trp-ink); }
.hm-trp__foot { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding: 1.4rem 2.4rem;
  border-top: 1px solid var(--trp-line); background: var(--trp-bg); }
.hm-trp__close { min-height: 4.8rem; padding: 0 2rem; border: 0; border-radius: 99rem; background: transparent; color: var(--trp-m);
  font: 600 1.5rem/1 var(--_font-default); cursor: pointer; box-shadow: inset 0 0 0 1px var(--trp-line); }
.hm-trp__close:hover { color: var(--trp-t); }
.hm-trp__go { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; min-width: 0; }
.hm-trp__go small { font-size: 1.25rem; color: var(--trp-mute); text-align: right; }
.hm-trp__book { display: inline-flex; align-items: center; justify-content: center; gap: .9rem; min-height: 5.2rem; padding: 0 2.8rem;
  border-radius: 99rem; background: #6b55cf; color: #fff !important; font: 600 1.7rem/1 var(--_font-accent); text-decoration: none;
  box-shadow: 0 1.2rem 2.6rem -1.2rem rgba(107, 85, 207, .7); transition: transform .2s ease, background-color .2s ease; }
.hm-trp__book:hover { transform: translateY(-1px); background: #5a45bd; }
[color-scheme="dark"] .hm-trp__book { background: #b9a9ff; color: #17122e !important; box-shadow: 0 1.2rem 2.6rem -1.2rem rgba(185, 169, 255, .5); }
[color-scheme="dark"] .hm-trp__book:hover { background: #cbbfff; }
@media (min-width: 992px) {
  .hm-trp__body { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
  .hm-trp__side { position: sticky; top: 0; }
}
@media (max-width: 767px) {
  .hm-trp { padding: 0; align-items: flex-end; }
  .hm-trp__card { width: 100%; max-height: 92%; border-radius: 2.4rem 2.4rem 0 0; animation-name: hm-trp-up; animation-duration: .36s; }
  .hm-trp__card::before { content: ""; position: absolute; top: .7rem; left: 50%; width: 4rem; height: .4rem; margin-left: -2rem; border-radius: 99rem; background: var(--trp-line); }
  .hm-trp__top { padding: 1.6rem 1rem .6rem 1.6rem; }
  .hm-trp__body { gap: 1.6rem; padding: .2rem 1.6rem 1.6rem; }
  .hm-trp__pic { border-radius: 1.6rem; }
  .hm-trp__t { font-size: 2.6rem; }
  .hm-trp__d { font-size: 1.5rem; }
  .hm-trp__foot { padding: 1.2rem 1.6rem calc(1.2rem + env(safe-area-inset-bottom, 0px)); }
  .hm-trp__go { flex: 1 1 auto; }
  .hm-trp__book { width: 100%; }
  .hm-trp__go small { align-self: center; text-align: center; }
}
@keyframes hm-trp-up { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .hm-trp__card { animation: none; } .hm-tr-job { transition: none; } }

/* A phone: one row that scrolls sideways under the thumb, sticking at the top while the tab scrolls beneath it. */
@media (max-width: 767px) {
  .hm-tr { padding-top: 11rem; }
  .hm-tr-intro { font-size: 1.6rem; }
  /* 2.9rem above the pills puts them level with the menu button (30 to 76 px down a phone) once the row sticks */
  .hm-tr-bar { position: sticky; top: 0; margin: 0 calc(-1 * var(--hm-tr-gutter, 1.5rem)); padding: 2.9rem 0 1rem; background: var(--base); }
  .hm-tr-bar.is-stuck { box-shadow: 0 .8rem 1.2rem -1.2rem rgba(0, 0, 0, .25); }
  .hm-tr-bar.is-stuck .hm-tr-tabs { margin-right: 8.4rem; padding-right: .8rem; }
  .hm-tr-tabs { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-padding: 0 var(--hm-tr-gutter, 1.5rem);
    padding: .2rem var(--hm-tr-gutter, 1.5rem) .4rem; }
  .hm-tr-tabs::-webkit-scrollbar { display: none; }
  .hm-tr-tabs__sep { margin: .4rem .2rem; }
  .hm-tr-lede { font-size: 1.6rem; }
  .hm-tr-sechead { margin-top: 4.4rem; }
  .hm-tr-band { padding: 2.4rem 2rem; }
  .hm-tr-band__b .hm-tr-btn { flex: 1 1 auto; }
}

/* Ask Handyman: a card under the picture on a computer, two round buttons beside Book this on a phone */
.hm-trp__side { display: grid; gap: 1.6rem; align-content: start; min-width: 0; }
.hm-trp__ask { display: none; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.6rem; align-items: start; padding: 1.8rem; border-radius: 2rem; border: 1px solid var(--trp-line); background: color-mix(in srgb, var(--trp-ink) 5%, transparent); }
.hm-trp__askhd { display: flex; align-items: center; gap: 1.4rem; }
.hm-trp__askhd img { flex: none; width: 5.2rem; height: 5.2rem; border-radius: 1.4rem; }
.hm-trp__askhd p { margin: 0; display: grid; gap: .3rem; }
.hm-trp__askhd b { font-size: 1.7rem; color: var(--trp-t); }
.hm-trp__askhd span { font-size: 1.4rem; line-height: 1.4; color: var(--trp-m); }
.hm-trp__askgo { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.6rem 0 0; }
.hm-trp__qr { grid-row: 1; grid-column: 2; margin: 0; display: grid; justify-items: center; gap: .6rem; }
.hm-trp__qr span { display: block; width: 10.4rem; height: 10.4rem; padding: .4rem; border-radius: 1.2rem; background: #fff; box-shadow: 0 0 0 1px var(--trp-line); }
.hm-trp__qr svg { display: block; width: 100%; height: 100%; }
.hm-trp__qr figcaption { font-size: 1.15rem; color: var(--trp-mute); text-align: center; max-width: 11rem; line-height: 1.3; }
.hm-trp__askb { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: .8rem; min-height: 4.6rem; padding: 0 1.6rem; border-radius: 99rem;
  border: 1px solid var(--trp-line); background: var(--trp-art); color: var(--trp-t) !important; font-weight: 600; font-size: 1.5rem; text-decoration: none; white-space: nowrap; }
.hm-trp__askb i { color: var(--trp-ink); font-size: 1.8rem; }
.hm-trp__askb:hover { border-color: var(--trp-ink); }
.hm-trp__quick { display: none; gap: .8rem; flex: none; }
.hm-trp__qi { display: grid; place-items: center; width: 5.2rem; height: 5.2rem; border-radius: 50%; border: 1px solid var(--trp-line);
  background: color-mix(in srgb, var(--trp-ink) 8%, transparent); color: var(--trp-ink) !important; font-size: 2.2rem; text-decoration: none; }
@media (min-width: 992px) { .hm-trp__ask { display: grid; } }
@media (max-width: 991px) { .hm-trp__quick { display: flex; } .hm-trp__foot { align-items: flex-start; } }
@media (max-width: 767px) { .hm-trp__close { display: none; } }