/* ==========================================================================
   Thrive Better Living, homepage refinement, 26 October 2026

   Loaded after story.css, so the last rule wins. Two jobs:

   1. The components the shortened homepage introduced: the one-service block, the
      solo plan document, the council commission row, the three response lanes.
   2. Measured changes to what was already there: section rhythm, and the weights
      at which the line drawings read correctly.

   Nothing here changes an animation's timing, its data attributes or its hooks.
   The scenes are the reason to scroll the page; they were never the problem.
   ========================================================================== */

/* ---- Section rhythm ----------------------------------------------------- */
/* 150px above and below each section is 300px of nothing per band, and the page
   carried seven static bands. Sections now breathe at roughly the proportion the
   type is set at rather than at the proportion a hero is. */
body.tb-body .tb-section{padding:clamp(72px,8vw,112px) 0}
body.tb-body .tb-head{margin-bottom:clamp(30px,4.2vw,54px)}
body.tb-body .tb-section--tight{padding-top:0}

/* The credentials line lost two of its seven claims, so the track is shorter and
   the same 46s crawled. Matched back to the old pace per claim. */
.tb-ticker__track{animation-duration:34s}

.tb-actions--centre{justify-content:center}
.tb-note--centre{text-align:center;margin-inline:auto;max-width:56ch}

/* ---- One service -------------------------------------------------------- */
/* Replaces the eight-card deck. The assessment is a single card because it is a
   single decision: the seven specialisms beside it are how the work is scoped,
   and they are navigation, not choices to weigh up before booking. */
.tb-core{display:grid;gap:clamp(16px,2vw,26px);align-items:stretch}
@media (min-width:960px){.tb-core{grid-template-columns:1.32fr .88fr}}

.tb-core__main{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:14px;
  padding:clamp(26px,3.2vw,46px);border-radius:var(--tb-radius);
  background:linear-gradient(158deg,#124a40 0%,var(--tb-forest) 52%,#0a332c 100%);color:#fff;
  box-shadow:0 44px 70px -48px rgba(13,61,53,.6)}
.tb-core__main::after{content:"";position:absolute;right:-16%;top:-42%;width:66%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(159,211,182,.17),transparent 68%);pointer-events:none}
.tb-core__main>*{position:relative}
.tb-core__tag{align-self:flex-start;padding:6px 13px;border-radius:999px;background:var(--tb-gold);
  color:var(--tb-ink);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.tb-core__main h3{font-size:clamp(27px,3vw,40px);line-height:1.04;letter-spacing:-.028em;color:#fff;max-width:22ch}
.tb-core__main p{font-size:16.5px;line-height:1.56;color:rgba(233,241,236,.84);max-width:48ch}
.tb-core__foot{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:auto;padding-top:14px}
.tb-core__foot .tb-btn{background:#fff;color:var(--tb-forest)}
.tb-core__foot .tb-btn:hover{box-shadow:0 18px 40px -18px rgba(0,0,0,.5)}
.tb-core__foot .tb-link{color:#fff;border-color:rgba(255,255,255,.3)}
.tb-core__foot .tb-link:hover{border-color:#fff}

.tb-core__scope{display:flex;flex-direction:column;padding:clamp(20px,2.2vw,30px);
  border:1px solid var(--tb-line);border-radius:var(--tb-radius);background:#fff}
.tb-core__scopelabel{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tb-leaf-text)}
.tb-core__scope ul{list-style:none;margin:12px 0 0;padding:0}
.tb-core__scope li+li{border-top:1px solid var(--tb-line)}
body.tb-body .tb-core__scope a{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 0;font-size:15px;font-weight:500;line-height:1.3;color:var(--tb-text);transition:color .3s}
.tb-core__scope a svg{flex:none;width:15px;height:15px;color:var(--tb-leaf-text);opacity:.45;
  transition:opacity .3s,transform .4s var(--tb-ease-out)}
body.tb-body .tb-core__scope a:hover{color:var(--tb-forest)}
.tb-core__scope a:hover svg,.tb-core__scope a:focus-visible svg{opacity:1;transform:translateX(3px)}
.tb-core__note{margin-top:16px;padding-top:15px;border-top:1px solid var(--tb-line);
  font-size:13.5px;line-height:1.5;color:var(--tb-muted)}

/* ---- The plan, shown once ---------------------------------------------- */
/* The document was sticky because a seven-item list scrolled past it. The list is
   gone, so it is a static centrepiece and is given the width to be read. */
.tb-plans--doc{display:block}
.tb-plans--doc .tb-doc{position:static;top:auto;max-width:880px;margin-inline:auto;
  padding:clamp(22px,2.8vw,36px);box-shadow:0 50px 80px -56px rgba(13,61,53,.5)}
@media (min-width:700px){.tb-plans--doc .tb-doc__row{grid-template-columns:132px 1fr}}

/* ---- What a council commissions ---------------------------------------- */
/* Four hairline-divided cells rather than two columns of bulleted prose. */
.tb-commission{list-style:none;margin:clamp(26px,3.4vw,42px) 0 0;padding:0;display:grid;gap:1px;
  background:var(--tb-line-dark);border:1px solid var(--tb-line-dark);
  border-radius:var(--tb-radius-sm);overflow:hidden}
@media (min-width:620px){.tb-commission{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1020px){.tb-commission{grid-template-columns:repeat(4,1fr)}}
.tb-commission li{display:flex;flex-direction:column;gap:7px;padding:22px 20px;
  background:rgba(255,255,255,.035);font-size:14.5px;line-height:1.5;color:var(--tb-muted-dark)}
.tb-commission b{color:#fff;font-size:15.5px;font-weight:600;letter-spacing:-.012em}

/* ---- Booking and the three response lanes ------------------------------ */
.tb-book--split{align-items:start}
@media (min-width:1000px){.tb-book--split{grid-template-columns:1.06fr .94fr;gap:clamp(36px,4vw,60px)}}

.tb-prio{padding:clamp(22px,2.4vw,30px);border:1px solid var(--tb-line);
  border-radius:var(--tb-radius);background:#fff}
.tb-prio__list{list-style:none;margin:14px 0 0;padding:0}
.tb-prio__list li+li{margin-top:8px}
body.tb-body .tb-prio__lane{display:flex;align-items:center;gap:11px;padding:13px 16px;
  border:1px solid var(--tb-line);border-radius:14px;color:var(--tb-text);
  transition:border-color .3s,background .3s,transform .4s var(--tb-ease-out)}
body.tb-body .tb-prio__lane:hover{border-color:var(--lane);background:var(--tb-mist);transform:translateX(3px)}
.tb-prio__lane i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--lane);box-shadow:0 0 0 4px var(--lane-soft)}
.tb-prio__lane b{flex:none;font-size:14.5px;font-weight:600}
.tb-prio__lane em{flex:none;font-style:normal;font-size:12.5px;font-weight:600;color:var(--lane)}
.tb-prio__lane span{flex:1 1 auto;min-width:0;text-align:right;font-size:13px;color:var(--tb-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-prio__lane svg{flex:none;width:15px;height:15px;color:var(--tb-muted);transition:transform .4s var(--tb-ease-out)}
.tb-prio__lane:hover svg{transform:translateX(3px)}
.tb-prio__lane--red{--lane:#b3261e;--lane-soft:rgba(179,38,30,.16)}
.tb-prio__lane--amber{--lane:#9a6200;--lane-soft:rgba(154,98,0,.16)}
.tb-prio__lane--green{--lane:#17714f;--lane-soft:rgba(23,113,79,.16)}
.tb-prio__note{margin-top:12px;font-size:12.5px;color:var(--tb-muted)}
body.tb-body .tb-prio__contract{display:block;margin-top:18px;padding-top:18px;border-top:1px solid var(--tb-line)}
.tb-prio__contract b{display:block;margin-bottom:5px;font-size:15px;font-weight:600;letter-spacing:-.012em;line-height:1.3}
.tb-prio__contract span{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:500;color:var(--tb-leaf-text);line-height:1.4}
.tb-prio__contract svg{width:15px;height:15px;transition:transform .4s var(--tb-ease-out)}
.tb-prio__contract:hover span{color:var(--tb-forest)}
.tb-prio__contract:hover svg{transform:translateX(3px)}

/* ---- The line drawings ------------------------------------------------- */
/* The floor was a hairline that stopped dead at both ends, which reads as a line
   rather than as ground, so it is masked out at the edges. The gold progress arc
   is 1px of colour against a 1px ring and needed the weight and the glow to be
   legible. And a pale colour on a dark ground reads bolder than gold does at the
   same stroke width, so the gold equipment is set half a pixel heavier to make
   the two look like one drawing. */
.tb-figure .floor,.tb-scene .floor{stroke-linecap:round;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.tb-figure .ring{stroke:rgba(255,255,255,.17)}
.tb-figure .arc{stroke-width:2.5;filter:drop-shadow(0 0 7px rgba(217,164,65,.45))}
.tb-figure .aid{stroke-width:4.5}
.tb-figure .lines,.tb-scene .ln{stroke-linejoin:round}
.tb-scene--3 .ln--gold{stroke-width:5}
.tb-scene--3 .carer--ghost{opacity:.24}

/* ---- Commissioning pathway, pinned ------------------------------------- */
/* The gold line is the argument on that section: start small, measure, scale. In view
   mode it drew against the section's passage through the viewport, so an ordinary
   scroll carried the four stages off the top of the screen while the line was still
   filling. The section now holds the viewport until the line reaches the end. */
.tb-pathway-pin .tb-pathway{margin-top:0;padding-top:0;border-top:0}
.tb-pathway-pin .tb-pathway__head{margin-bottom:clamp(20px,3vw,32px)}
.tb-pathway-pin .tb-models{margin-top:clamp(20px,2.6vw,30px)}

/* A stage cannot hold what will not fit, and .tb-pin__stage clips its overflow. Below
   this height the section goes back to scrolling, and the engine follows on its own:
   it pins only while the stage computes to sticky, so this query is the whole switch. */
@media (max-height:780px){
  .tb-pathway-pin{height:auto!important}
  .tb-pathway-pin .tb-pin__stage{position:relative;height:auto;min-height:0;
    padding:clamp(72px,8vw,112px) 0;overflow:visible;display:block}
}

/* ---- Phone: a nowrap description was setting the column's floor -------- */
/* .tb-book is a single implicit grid column on a phone, and an implicit column is
   sized by its content, so the lane description's white-space:nowrap pushed the whole
   column to 389px inside a 375px screen. min-width:0 lets the column shrink; below
   560px the description goes, because the colour, the word and the time are the
   information and the sentence is a nicety. */
.tb-book>*{min-width:0}
@media (max-width:560px){
  .tb-prio__lane span{display:none}
  .tb-prio__lane b{flex:1 1 auto}
}

/* ---- Second pass: standing still where nothing is being said ----------- */

/* The credentials strip. Four facts a commissioner checks, crawling past on a loop,
   directly beneath the largest type on the page. A marquee asks to be watched; these
   only need to be read. The duplicate row the loop needed is out of the markup too. */
.tb-ticker__track{width:auto;animation:none;justify-content:center;flex-wrap:wrap}
.tb-ticker ul{flex-wrap:wrap;justify-content:center}
.tb-ticker li{padding:15px 20px;gap:20px;white-space:normal;text-align:center}
.tb-ticker li:last-child::after{display:none}

/* The footer. Two things moved down there: the four words of the signature faded up one
   at a time on a 220ms stagger, and the backdrop photograph scaled as the section
   scrolled. The hover shift on the three routes stays, because that is a control
   answering a pointer rather than the page animating itself at the reader. */
.tb-final__media img,.tb-final__media video{transform:none}
.tb-final__sig{opacity:1;transform:none}
.tb-final__words{display:block;opacity:1}
.tb-final__words i{opacity:1;transform:none;transition:none}

/* The room is a drawing now, not a widget: no pins, no callout, no sheen sweeping
   across it. .tb-room--art still carries every stroke and label style. */
.tb-room--still::before,.tb-room--still::after{display:none}
.tb-room__says{max-width:62ch;margin:clamp(18px,2.2vw,26px) auto 0;text-align:center;
  font-size:15.5px;line-height:1.6;color:var(--tb-muted)}

/* Two pinned scenes left rather than four, so the hero no longer runs straight into a
   second full-screen takeover with no air between them. */
.tb-reason .tb-pin__stage,.tb-transition .tb-pin__stage{padding-block:clamp(16px,3vh,40px)}

@media (prefers-reduced-motion:reduce){
  .tb-figure .arc{filter:none}
}