/* Stone & Co — shared stylesheet (23 Oct 2026).
   Everything after the critical tokens/base/reveal rules that every page
   used to carry inline. The critical section stays inline in the shell
   (sectors/healthcare/care-homes.html, lifted by _build/build_pages.py);
   this file is linked from every generated page. Edit here, once. */
/* ── NAV (identical to homepage) ── */
.nav-shell{position:fixed;top:0;left:0;right:0;z-index:80;padding:1.3rem var(--gutter) 0;transition:padding .32s ease}
.nav-shell.stuck{padding-top:.6rem}
.nav{max-width:1280px;margin-inline:auto;display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:2.4rem;padding:1.15rem 2.7rem;border-radius:var(--pill);
  background:rgba(255,255,255,.10);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.16);
  transition:padding .32s ease,background .35s ease,border-color .35s ease}
.nav-shell.stuck .nav{background:rgba(15,42,53,.88);border-color:rgba(255,255,255,.1);padding:.7rem 2.3rem}
.nav-l,.nav-r{display:flex;align-items:center;gap:2.6rem;min-width:0}
.nav-r{justify-content:flex-end}
.nav a{color:#fff;text-decoration:none;font-size:1rem;opacity:.9;font-family:var(--font-body);
  transition:opacity .2s,color .2s,font-size .32s ease}
.nav a:hover{opacity:1;color:var(--mint)}
.nav a[aria-current="page"]{opacity:1;color:var(--mint)}
.nav-shell.stuck .nav a{font-size:.92rem}
.nav-shell.stuck .nav-l,.nav-shell.stuck .nav-r{gap:2rem}
.nav-l>a,.nav-r>a,.has-sub>a{letter-spacing:.015em}
.brand{justify-self:center;display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);
  color:#fff;text-decoration:none;font-size:1.14rem;letter-spacing:.06em;white-space:nowrap}
/* The logo is 195x64. Stating the ratio reserves its width before the file
   arrives, so the nav links either side do not slide when it lands. Height is
   set per breakpoint below and the ratio does the rest. */
.logo-img{aspect-ratio:195/64}
/* The word-mark is a fallback for a logo that fails to load, so it starts
   hidden rather than being rendered and then removed on load. Rendering it
   and deleting it a moment later moved the whole brand block, which is a
   layout shift on every cold visit. Scoped to the two brand marks: the hero
   uses .fb for something unrelated. */
.brand .fb,.fbrand .fb{display:none}
.brand.logo-failed .fb,.fbrand.logo-failed .fb{display:inline}
.brand .logo-img{height:52px;width:auto;transition:height .32s ease}
.nav-shell.stuck .brand .logo-img{height:36px}
.brand-mark{width:33px;height:28px;flex:0 0 33px;background:currentColor;
  -webkit-mask:var(--mark) center/contain no-repeat;mask:var(--mark) center/contain no-repeat;font-size:0}
.has-sub{position:relative}
.has-sub>a::after{content:'';display:inline-block;margin-left:.5em;width:.5em;height:.5em;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .25s}
.has-sub:hover>a::after{transform:translateY(1px) rotate(45deg)}
.sub{position:absolute;top:calc(100% + .9rem);min-width:280px;background:#fff;border-radius:var(--rcard);
  padding:.6rem;box-shadow:0 20px 54px rgba(15,42,53,.24);opacity:0;visibility:hidden;
  transform:translateY(-6px);transition:.18s ease}
.nav-r .sub{right:0}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none}
.sub a{display:block;color:var(--dark);padding:.7rem .95rem;border-radius:9px;font-size:.95rem;opacity:1}
.sub a:hover{background:var(--cream);color:var(--dark)}
.sub a[aria-current="page"]{background:var(--cream);color:var(--dark);font-weight:600}
.sub .p{font-weight:600}
/* The four specialisms are children of healthcare, and the menu should say so */
.sub .p.parent{border-bottom:1px solid rgba(15,42,53,.12);margin-bottom:.3rem;padding-bottom:.7rem}
.sub .p.parent + a,.sub .p.parent ~ a{padding-left:1.9rem;position:relative}
.sub .p.parent ~ a::before{content:'';position:absolute;left:.95rem;top:50%;width:6px;height:1px;
  background:rgba(15,42,53,.32)}
/* Contact had no route through the header at all, only the footer and the
   CTAs inside each page. Mint on the translucent band and on the petrol one
   it turns into when stuck, so it never matches what it sits on. */
.nav-cta{background:var(--mint);color:var(--dark);padding:.5rem 1.1rem;border-radius:var(--pill);
  font-size:.94rem;font-weight:500;white-space:nowrap;opacity:1;
  transition:background .22s ease,color .22s ease,transform .22s ease,padding .32s ease}
.nav a.nav-cta:hover{background:#fff;color:var(--dark);opacity:1;transform:translateY(-1px)}
.nav-shell.stuck .nav a.nav-cta{font-size:.88rem;padding:.44rem 1rem}
.nav-mobile .nav-cta{display:inline-flex;justify-content:center;margin-top:.9rem;padding:.7rem 1.1rem;
  font-size:.95rem;text-align:center}
.burger{display:none;background:none;border:0;color:#fff;font-size:1.5rem;cursor:pointer;line-height:1}
.nav-mobile{display:none}
/* ── MOBILE TYPE ── each statement on its own single line ── */
@media(max-width:700px){
  h1{font-size:clamp(1.5rem,6.4vw,2rem);letter-spacing:-.02em}
  h2{font-size:clamp(1.35rem,5.6vw,1.8rem);letter-spacing:-.02em}
  .hero .subline{font-size:1rem}
  .tq{font-size:1.15rem}
}
@media(max-width:900px){
  .nav{grid-template-columns:auto 1fr auto;padding:.9rem 1.2rem}
  .brand{justify-self:start;order:1;margin-right:auto}
  .burger{order:3;margin-left:auto}
  .nav-l,.nav-r{display:none}
  .burger{display:block;order:-1}
  .brand .logo-img{height:40px}
  .nav-mobile{position:absolute;top:calc(100% + .55rem);left:0;right:0;flex-direction:column;
    align-items:flex-start;gap:.15rem;padding:1rem;background:rgba(15,42,53,.97);border-radius:var(--rcard)}
  .nav-mobile.open{display:flex}
  .nav-mobile a{padding:.34rem .4rem;display:block;width:100%;font-size:.94rem}
  .nav-mobile .grp{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);opacity:.8;margin:.45rem 0 .1rem}
  .nav-mobile .kid{padding-left:1.6rem;position:relative;opacity:.92}
  .nav-mobile .kid::before{content:'';position:absolute;left:.5rem;top:50%;width:6px;height:1px;background:rgba(180,223,210,.5)}
}

/* ── BUTTONS ── */
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.3rem}
.btn{display:inline-flex;align-items:center;gap:.45rem;padding:.62rem 1.25rem;border-radius:var(--pill);
  text-decoration:none;font-size:var(--s--1);font-weight:500;border:1px solid transparent;cursor:pointer;
  overflow:hidden;position:relative;
  transition:background .22s ease,transform .22s ease,color .22s ease,border-color .22s ease}
.btn-mint{background:var(--mint);color:var(--dark)}
.btn-mint:hover{background:var(--dark);color:var(--mint);transform:translateY(-2px)}
.btn-ghost{border-color:rgba(255,255,255,.36);color:#fff}
.btn-ghost:hover{background:var(--mint);color:var(--dark);border-color:var(--mint);transform:translateY(-2px)}
.btn-dark{background:var(--dark);color:#fff}
.btn-dark:hover{background:var(--teal);transform:translateY(-2px)}
.btn-cream{background:var(--cream);color:var(--dark)}
.btn-cream:hover{background:var(--dark);color:var(--cream);transform:translateY(-2px)}
.btn-line{border-color:rgba(15,42,53,.26);color:var(--dark)}
.btn-line:hover{background:var(--dark);color:#fff;border-color:var(--dark);transform:translateY(-2px)}
.arw{transition:transform .22s ease}
.btn:hover .arw{transform:translateX(4px)}
.lbl-wrap{display:inline-grid;overflow:hidden;line-height:1.25;text-align:left}
.lbl-wrap>span{grid-area:1/1;display:block;white-space:nowrap;
  transition:transform .44s cubic-bezier(.66,0,.24,1),opacity .3s ease}
.lbl-wrap>.t2{transform:translate(8px,110%);opacity:0}
.btn:hover .lbl-wrap>.t1{transform:translate(-8px,-110%);opacity:0}
.btn:hover .lbl-wrap>.t2{transform:none;opacity:1}
@media(prefers-reduced-motion:reduce){.lbl-wrap>.t2{display:none}.lbl-wrap>.t1{transform:none!important;opacity:1!important}}

/* ── HERO ── */
.hero{position:relative;min-height:min(88svh,792px);display:flex;align-items:flex-end;overflow:hidden;color:#fff}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media .im{position:absolute;inset:0;z-index:1;background-image:url('/media/care-lounge-meeting-flip.jpg');
  background-size:cover;background-position:center}
.hero-media .fb{position:absolute;inset:0;z-index:0;background:linear-gradient(140deg,#0d1c1b,var(--dark) 45%,#16383F)}
.hero-media::after{content:'';position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(15,42,53,.72) 0%,rgba(15,42,53,.48) 40%,rgba(15,42,53,.88) 100%)}
.hero-inner{position:relative;z-index:3;width:100%;flex:1 1 auto;padding-block:9rem clamp(3.2rem,8vh,5rem)}
.hero h1{max-width:30ch}
.hero .subline{max-width:58ch;margin:1.5rem 0 0;font-size:var(--s-1);line-height:1.5;color:#fff}
.breadcrumb{font-size:var(--s--1);letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.66);margin:0 0 1.3rem}
.breadcrumb a{text-decoration:none}
.breadcrumb a:hover{color:var(--mint)}
.breadcrumb i{font-style:normal;margin-inline:.5rem;opacity:.5}
.breadcrumb-inline{font-size:var(--s--1);letter-spacing:.1em;text-transform:uppercase;color:var(--sage);margin:0 0 2rem}
.breadcrumb-inline a{text-decoration:none}
.breadcrumb-inline a:hover{color:var(--teal)}
.breadcrumb-inline i{font-style:normal;margin-inline:.5rem;opacity:.55}

/* ── LEDE ── */
.opening{font-family:var(--font-display);font-size:clamp(1.35rem,1.15rem + .9vw,1.85rem);
  line-height:1.35;letter-spacing:-.02em;max-width:34ch;margin:0 0 1.8rem}
.two-col{display:grid;gap:1.4rem;grid-template-columns:1fr;margin-bottom:1.6rem}
@media(min-width:860px){.two-col{grid-template-columns:1fr 1fr;gap:3rem}}
.two-col p{margin:0}
.closing-note{max-width:70ch;padding-left:1.1rem;border-left:2px solid var(--mint);color:var(--teal)}

/* ── SCROLL-LINKED QUOTE ── */
.pullquote{font-family:var(--font-display);font-style:italic;font-weight:400;text-align:center;
  font-size:clamp(1.5rem,1.1rem + 2.1vw,2.6rem);line-height:1.26;max-width:34ch;margin:0 auto;letter-spacing:-.02em}
.pullquote .w{color:rgba(48,84,91,.2);transition:color .38s ease}
.pullquote .w.lit{color:var(--teal)}
.band-dark .pullquote .w{color:rgba(180,223,210,.22)}
.band-dark .pullquote .w.lit{color:var(--mint)}

/* ── COMPARISON ── */
.compare{display:grid;gap:1.2rem;grid-template-columns:1fr;margin-top:2.6rem}
@media(min-width:860px){.compare{grid-template-columns:1fr 1fr;gap:1.5rem}}
.band-teal .ccard{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);color:#fff}
.band-teal .ccard li::marker{color:var(--mint)}
.ccard{background:var(--white);border-radius:var(--rcard);padding:2.1rem;border:1px solid rgba(15,42,53,.09);
  transition:transform .3s ease,box-shadow .3s ease}
.ccard:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(15,42,53,.14)}
.ccard .tag{display:inline-block;font-size:var(--s--1);letter-spacing:.1em;text-transform:uppercase;
  padding:.3rem .8rem;border-radius:var(--pill);margin-bottom:1.1rem;font-weight:500}
.tag-strong{background:var(--mint);color:var(--dark)}
.tag-weak{background:var(--sand);color:var(--dark)}
.ccard h3{margin-bottom:1rem}
.ccard ul{margin:0;padding-left:1.1rem}
.ccard li{margin-bottom:.5rem;font-size:.94rem}
.ccard li::marker{color:var(--teal)}

/* ── STATS ── */
.stats{display:grid;gap:0;grid-template-columns:1fr;margin-top:2.6rem}
@media(min-width:760px){.stats{grid-template-columns:repeat(3,1fr)}}
.stat{padding:1.4rem clamp(1rem,2.4vw,2rem);text-align:center}
@media(min-width:760px){.stat+.stat{border-left:1px solid rgba(255,255,255,.18)}}
@media(max-width:759px){.stat+.stat{border-top:1px solid rgba(255,255,255,.16)}}
.stat .fig{font-family:var(--font-body);font-weight:400;font-size:clamp(2rem,1.5rem + 2.2vw,3.1rem);
  color:var(--mint);display:block;line-height:1;letter-spacing:-.02em}
.stat .cap{font-size:var(--s--1);color:rgba(255,255,255,.78);margin:.9rem 0 0;line-height:1.5}

/* ── TIMELINE — horizontal rail, numbered discs sitting on the line,
   active stage in mint. Advances as you scroll, or click a stage. ── */
.tl-head{display:grid;gap:1.5rem;grid-template-columns:1fr}
@media(min-width:900px){.tl-head{grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start}}
.tl{margin-top:clamp(2.4rem,5vh,3.4rem)}
.tl-rail{position:relative;padding-top:0}
.tl-line,.tl-fill{position:absolute;top:20px;height:2px;z-index:1}
.tl-line{left:21px;right:calc(20% - 21px);background:rgba(15,42,53,.14)}
.tl-fill{left:21px;width:0;background:var(--teal);transition:width .55s cubic-bezier(.22,.61,.36,1)}
@media(max-width:859px){
  .tl-line,.tl-fill{display:none}
  .tl-steps{display:flex;gap:1rem}
  .tl-steps .tl-step{flex:0 0 74%;background:var(--paper,#fff);border:1px solid rgba(15,42,53,.12);
    border-radius:12px;padding:1.1rem 1.2rem}
  .tl-steps .tl-step[aria-current="true"]{border-color:var(--teal);box-shadow:0 10px 30px rgba(15,42,53,.1)}
}
.tl-steps{display:grid;grid-template-columns:1fr;position:relative}
@media(min-width:860px){.tl-steps{grid-template-columns:repeat(5,1fr);gap:0}}
.tl-step{display:block;border:0;background:none;font-family:inherit;text-align:left;cursor:pointer;
  padding:0 clamp(.7rem,1.4vw,1.2rem) 0 0;position:relative;transition:opacity .35s}
@media(max-width:859px){
  .tl-step{display:grid;grid-template-columns:44px 1fr;gap:0 1rem;align-items:start;
    padding:1.1rem 0;border-bottom:1px solid rgba(15,42,53,.12)}
  .tl-step:last-of-type{border-bottom:0}
}
.tl-step .dot{width:42px;height:42px;border-radius:50%;border:2px solid rgba(15,42,53,.16);
  background:var(--cream);display:grid;place-items:center;font-family:var(--font-display);
  font-size:.92rem;color:var(--sage);position:relative;z-index:3;margin-bottom:1.1rem;
  transition:border-color .35s,background .35s,color .35s,transform .35s}
@media(max-width:859px){.tl-step .dot{grid-row:1/3;margin-bottom:0}}
.tl-step[aria-current="true"] .dot{border-color:var(--teal);background:var(--mint);
  color:var(--dark);transform:scale(1.08)}
.tl-step .when{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sage);font-weight:500;margin-bottom:.4rem;transition:color .3s}
.tl-step[aria-current="true"] .when{color:var(--teal)}
.tl-step h3{font-size:var(--s-2);margin-bottom:.4rem;transition:color .3s}
.tl-step[aria-current="true"] h3{color:var(--teal)}
.tl-step .sub{font-size:.88rem;color:rgba(15,42,53,.7);margin:0;max-width:26ch}
.tl-step:not([aria-current="true"]) h3{opacity:.6}
.tl-step:not([aria-current="true"]) .sub{opacity:.55}
.tl-step:not([aria-current="true"]) .when{opacity:.6}
.tl-step:hover h3,.tl-step:hover .sub,.tl-step:hover .when{opacity:1}
.tl-panel{margin-top:clamp(2rem,4vh,3rem);padding-top:1.8rem;border-top:1px solid rgba(15,42,53,.14)}
.tl-who{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin:0 0 1rem}
.tl-body{display:none;max-width:74ch}
.tl-body.on{display:block;animation:tlin .5s ease}
@keyframes tlin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tl-body p{margin:0 0 .8em;font-size:.95rem}
.tl-body p:last-child{margin-bottom:0}

/* ── BUYERS ── */
.buyers{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:2.6rem}
@media(min-width:700px){.buyers{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.buyers{grid-template-columns:repeat(4,1fr)}}
.buyer{background:var(--white);border:1px solid rgba(15,42,53,.09);border-radius:var(--rcard);
  padding:1.7rem;position:relative;overflow:hidden;isolation:isolate;transition:box-shadow .35s,transform .35s}
.buyer::before{content:'';position:absolute;inset:0 0 auto 0;height:0;background:var(--dark);z-index:-1;
  transition:height .55s cubic-bezier(.4,0,.2,1)}
.buyer:hover::before{height:100%}
.buyer:hover{transform:translateY(-4px);box-shadow:0 20px 46px rgba(15,42,53,.18)}
.buyer .no{font-family:var(--font-display);font-size:.9rem;color:var(--teal);transition:color .35s;
  display:block;position:relative;padding-bottom:.7rem;margin-bottom:.7rem}
.buyer .no::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:rgba(15,42,53,.16);transform:scaleX(.16);transform-origin:left;
  transition:transform .6s cubic-bezier(.22,.61,.36,1),background .4s}
.buyer:hover .no::after{transform:scaleX(1);background:var(--mint)}
.buyer h3{font-size:var(--s-1);margin:.5rem 0 .6rem;transition:color .35s}
.buyer p{font-size:.88rem;color:rgba(15,42,53,.75);margin:0;transition:color .35s}
.buyer:hover .no{color:var(--mint)}
.buyer:hover h3{color:#fff}
.buyer:hover p{color:rgba(255,255,255,.82)}

/* ── LEVERS ── */
.levers{display:grid;gap:.7rem;grid-template-columns:1fr;margin-top:2.2rem;counter-reset:lv}
@media(min-width:820px){.levers{grid-template-columns:1fr 1fr;gap:.7rem 2.2rem}}
.lever{counter-increment:lv;display:flex;gap:1rem;align-items:flex-start;
  padding:1.05rem 0;border-bottom:1px solid rgba(15,42,53,.12)}
.lever::before{content:counter(lv,decimal-leading-zero);font-family:var(--font-display);
  color:var(--sage);font-size:.9rem;flex:0 0 auto;padding-top:.15rem}
.lever p{margin:0;font-size:.95rem}

/* ── NEWSROOM PULL ── */
.pull{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;background:var(--white);
  border-radius:var(--rcard);padding:1.8rem;border:1px solid rgba(15,42,53,.09);margin-top:1.6rem}
.pull .meta{font-size:var(--s--1);text-transform:uppercase;letter-spacing:.12em;color:var(--teal);margin:0 0 .5rem}
.pull h3{max-width:38ch}
.pull .go{margin-left:auto}

/* ── NEWSROOM RAIL (matches the homepage) ── */
.newsroom-top{border-top:1px solid rgba(124,160,160,.45);padding-top:clamp(2rem,4vh,3rem)}
.rail{display:grid;gap:1.5rem;grid-template-columns:1fr}
@media(min-width:760px){.rail{grid-template-columns:repeat(3,1fr)}}
.acard{text-decoration:none;color:inherit;display:block}
.acard .thumb{aspect-ratio:16/10;border-radius:10px;overflow:hidden;margin-bottom:1.1rem;background:var(--sand)}
.acard .thumb div{width:100%;height:100%;background-size:cover;background-position:center;
  transition:transform .55s ease}
.acard:hover .thumb div{transform:scale(1.06)}
.acard .tags{font-size:var(--s--1);color:var(--sage);margin:0 0 .5rem}
.acard .date{font-size:var(--s--1);color:var(--teal);opacity:.75;margin:0 0 .5rem}
/* Hover: no colour shift — the image zooms and the line under the heading
   progresses from left to right. Standard blog-card behaviour site-wide. */
.acard h3{margin-bottom:.6rem;position:relative;padding-bottom:.65rem}
.acard h3::before{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(15,42,53,.12)}
.acard h3::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--mint);
  transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.acard:hover h3::after,.acard:focus-visible h3::after{transform:scaleX(1)}
.acard .ex{font-size:var(--s--1);color:rgba(15,42,53,.72);margin:0}

/* ── FAQ ── */
.faq-grid{display:grid;gap:.85rem;grid-template-columns:1fr}
@media(min-width:860px){.faq-grid{grid-template-columns:1fr 1fr;gap:.85rem 1.5rem}}
.faq{border-radius:var(--rcard);overflow:hidden;background:var(--dark);align-self:start;transition:background .3s ease}
/* Open state (signed off 5 Oct 2026, option E): the card stays dark and a
   mint hairline draws across under the question as the answer opens. */
.faq-h{position:relative}
.faq-h::after{content:"";position:absolute;left:1.4rem;right:1.4rem;bottom:0;height:1.5px;background:var(--mint);
  transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.faq.open .faq-h::after{transform:scaleX(1)}
.faq.open .faq-h .pm{color:var(--mint)}
.faq-h{width:100%;display:flex;align-items:center;gap:1rem;background:none;border:0;cursor:pointer;
  padding:1.15rem 1.4rem;color:#fff;font-family:var(--font-body);font-size:var(--s-0);font-weight:500;
  text-align:left;transition:color .25s}
.faq.open .faq-h{color:#fff}
.faq-h .t{flex:1}
.faq-h .pm{font-size:1.15rem;line-height:1;transition:transform .3s ease,color .3s ease}
.faq-h[aria-expanded="true"] .pm{transform:rotate(45deg)}
.faq-b{max-height:0;overflow:hidden;transition:max-height .42s cubic-bezier(.22,.61,.36,1)}
.faq-b p{padding:0 1.4rem 1.3rem;margin:0;font-size:.94rem;color:rgba(255,255,255,.88)}
.faq-b p{padding-top:1rem}

/* ── IMAGE BREAK ── */
.band-img{height:clamp(460px,58vh,700px);border-radius:var(--rcard);background-size:cover;
  background-position:center;border:1px solid rgba(15,42,53,.08)}

/* ── TIMELINE CELEBRATION ── */
.confetti-bit{position:absolute;width:7px;height:11px;border-radius:2px;pointer-events:none;z-index:9;
  left:0;top:0;opacity:0;animation:confetti-fly 1.15s cubic-bezier(.2,.6,.35,1) forwards}
.confetti-bit.round{width:7px;height:7px;border-radius:50%}
@keyframes confetti-fly{
  0%{opacity:1;transform:translate(0,0) rotate(0deg) scale(1)}
  70%{opacity:1}
  100%{opacity:0;transform:translate(var(--cx),var(--cy)) rotate(var(--cr)) scale(.7)}
}

/* ── PULL QUOTE ── */
.bigquote{font-family:var(--font-display);font-style:italic;font-weight:400;text-align:center;
  font-size:clamp(1.5rem,1.05rem + 2.2vw,2.7rem);line-height:1.28;max-width:34ch;margin:0 auto;letter-spacing:-.02em}
.bigquote .w{color:rgba(48,84,91,.2);transition:color .38s ease}
.bigquote .w.lit{color:var(--teal)}

/* ── MULTIPLES TABLE ── */
.mult{width:100%;border-collapse:collapse;margin-top:2rem}
.mult th{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mint);
  font-weight:600;text-align:left;padding:0 1rem 1rem 0;border-bottom:1px solid rgba(255,255,255,.24)}
.mult td{padding:1.15rem 1rem 1.15rem 0;border-bottom:1px solid rgba(255,255,255,.14);
  font-size:.96rem;color:rgba(255,255,255,.88);vertical-align:top}
.mult td:last-child{font-family:var(--font-display);font-size:1.35rem;color:var(--mint);white-space:nowrap}
.mult tr:last-child td{border-bottom:0}
.mult-note{font-size:.82rem;color:rgba(255,255,255,.6);margin:1.2rem 0 0;max-width:70ch}

/* ── NEXT STEPS (matches the audience pages) ── */
.ns-grid{display:grid;gap:2.2rem;grid-template-columns:1fr}
@media(min-width:900px){.ns-grid{grid-template-columns:1fr 1fr;gap:4rem;align-items:start}}
.ns-cap{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);font-weight:600;margin:0 0 1rem}
.ns-list{list-style:none;margin:0 0 1.4rem;padding:0}
.ns-list li{position:relative;padding:.55rem 0 .55rem 1.9rem;font-size:.96rem;border-bottom:1px solid rgba(15,42,53,.14)}
.ns-list li:last-child{border-bottom:0}
.ns-list li::before{content:'';position:absolute;left:0;top:.95rem;width:16px;height:16px;border-radius:50%;background:var(--dark)}
.ns-list li::after{content:'';position:absolute;left:4px;top:1.25rem;width:8px;height:4px;
  border-left:2px solid var(--mint);border-bottom:2px solid var(--mint);transform:rotate(-45deg)}
.ns-fine{font-size:.85rem;color:var(--teal);margin:0}

/* ── EXPANDED VALUATION DRIVERS ── */
.drivers{display:grid;gap:1.1rem 2.6rem;grid-template-columns:1fr;margin-top:2.4rem;counter-reset:dv}
@media(min-width:860px){.drivers{grid-template-columns:1fr 1fr}}
.driver{counter-increment:dv;padding:1.5rem 0;border-bottom:1px solid rgba(15,42,53,.12)}
.driver::before{content:counter(dv,decimal-leading-zero);font-family:var(--font-display);
  color:var(--sage);font-size:1rem;display:block;margin-bottom:.5rem}
.driver h3{font-size:var(--s-1);margin-bottom:.5rem}
.driver p{margin:0;font-size:.94rem;color:rgba(15,42,53,.8)}
.tool-link{display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem;color:var(--teal);
  text-decoration:none;border-bottom:1px solid var(--mint);padding-bottom:2px;margin-top:.4rem}
.tool-link:hover{color:var(--dark)}

/* ── FOOTER ── */
footer{background:var(--dark);color:rgba(255,255,255,.74);padding-block:3.6rem 2rem;font-size:var(--s--1)}
.fgrid{display:grid;gap:2.4rem;grid-template-columns:1fr}
/* Four columns: brand, Tools, Firm, Get in touch. Two-up in between, because
   four across a tablet crushes the tool pills onto three lines each. */
@media(min-width:620px){.fgrid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.fgrid{grid-template-columns:1.5fr 1fr .7fr .9fr}}
.fbrand{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem}
.fbrand .logo-img{height:57px;width:auto}
footer h4,footer .footer-h{font-family:var(--font-display);font-weight:400;line-height:1.2;font-size:var(--s-1);color:var(--mint);margin:0 0 1rem;letter-spacing:0}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:.6rem}
footer a{text-decoration:none;opacity:.82;transition:.2s}
footer a:hover{opacity:1;color:var(--mint)}
.foot-tag{color:var(--mint);max-width:40ch}
.tool-pill{display:inline-flex;align-items:center;gap:.45rem;padding:.8rem 1.4rem;border-radius:var(--pill);
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:#fff;
  margin-bottom:.6rem;overflow:hidden;position:relative;text-decoration:none;
  transition:background .22s ease,transform .22s ease,border-color .22s ease,color .22s ease}
.tool-pill:hover{background:var(--mint);border-color:var(--mint);color:var(--dark);transform:translateY(-2px)}
.tool-pill .arw{transition:transform .22s ease}
.tool-pill:hover .arw{transform:translateX(4px)}
.tool-pill:hover .lbl-wrap>.t1{transform:translate(-8px,-110%);opacity:0}
.tool-pill:hover .lbl-wrap>.t2{transform:none;opacity:1}
.social{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;
  background:var(--mint);border:1px solid var(--mint);color:var(--dark);transition:.22s}
.social:hover{background:var(--dark);border-color:var(--dark);color:var(--mint);transform:translateY(-2px)}
.social svg{width:19px;height:19px}
.news-row{display:grid;gap:1.2rem;grid-template-columns:1fr;margin-top:2.6rem;padding-top:2rem;
  border-top:1px solid rgba(255,255,255,.14);align-items:center}
@media(min-width:760px){.news-row{grid-template-columns:1fr auto}}
.news-head{color:#fff;font-family:var(--font-body);font-size:var(--s-0);font-weight:600;margin:0}
.news-sub{color:var(--mint);margin:.3rem 0 0}
.news-form{display:flex;gap:.6rem;flex-wrap:wrap}
.news-form input{padding:.8rem 1.2rem;border-radius:var(--pill);border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.06);color:#fff;font-family:inherit;min-width:210px}
.news-form input::placeholder{color:rgba(255,255,255,.5)}
.fbase{margin-top:2.2rem;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;opacity:.62}
.fbase span{display:inline-flex;gap:1.4rem;flex-wrap:wrap}
.legal{margin-top:1.2rem;font-size:.72rem;font-style:italic;opacity:.5;line-height:1.6}
.cc-footer-link{background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer;opacity:.82;text-decoration:none}
.cc-footer-link:hover{opacity:1;color:var(--mint)}
.new-tag{color:var(--mint);font-weight:600}

/* ── 30 Sep 2026: nav and footer tidy ──
   Resources replaces Tools (it now holds FAQs and the buyer register), the
   dropdown label never wraps its arrow onto a second line, and the partner
   button keeps petrol text on mint, going petrol with mint text on hover
   rather than white. */
.has-sub>a{white-space:nowrap}
.nav a.nav-cta,.nav-mobile a.nav-cta{color:var(--dark)}
.nav a.nav-cta:hover,.nav-mobile a.nav-cta:hover{background:var(--dark);color:var(--mint);box-shadow:inset 0 0 0 1px var(--mint);opacity:1;transform:translateY(-1px)}
.nav-r .sub{min-width:300px}
.nav-r .sub a{white-space:nowrap}
.sub a.sep{border-top:1px solid rgba(15,42,53,.12);margin-top:.3rem;padding-top:.85rem;border-radius:0 0 9px 9px}
/* Footer links: plain text, a mint rule drawn left to right and an arrow
   sliding in on hover. Replaces the pill buttons in the Resources column. */
.flink{position:relative;display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;color:#fff;opacity:.82;
  text-decoration:none;padding-bottom:3px;transition:color .25s ease,opacity .25s ease}
.flink::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--mint);
  transform:scaleX(0);transform-origin:left;transition:transform .38s cubic-bezier(.22,.61,.36,1)}
.flink .arw{display:inline-block;opacity:0;transform:translateX(-6px);transition:opacity .25s ease,transform .3s ease}
.flink:hover,.flink:focus-visible{opacity:1;color:var(--mint)}
.flink:hover::after,.flink:focus-visible::after{transform:scaleX(1)}
.flink:hover .arw,.flink:focus-visible .arw{opacity:1;transform:none}
.flink .new-tag{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
@media (prefers-reduced-motion: reduce){.flink::after,.flink .arw{transition:none}}
/* ── EXIT-INTENT NEWSLETTER ─────────────────────────────────
   Shows once per visitor, when the cursor
   leaves the top of the page (time fallback on touch devices). */
.nlm{position:fixed;inset:0;z-index:220;display:none;place-items:center;
  background:rgba(15,42,53,.55);padding:1rem}
.nlm.show{display:grid}
.nlm-card{position:relative;background:var(--cream);color:var(--dark);border-radius:var(--rcard);
  padding:clamp(1.6rem,4vw,2.6rem);max-width:560px;width:100%;box-shadow:0 40px 90px rgba(0,0,0,.4);
  max-height:92svh;overflow:auto;animation:nlmin .45s cubic-bezier(.22,.61,.36,1)}
@keyframes nlmin{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.nlm-x{position:absolute;top:1.1rem;right:1.1rem;width:40px;height:40px;border-radius:10px;
  background:var(--dark);color:var(--cream);border:0;font-size:1rem;cursor:pointer;transition:background .2s}
.nlm-x:hover{background:var(--teal)}
.nlm-logo{height:38px;width:auto;margin-bottom:1.1rem}
/* Mint rule above the headline. The card is cream, so mint reads as an accent
   here where mint text would not. */
.nlm-rule{width:56px;height:3px;background:var(--mint);border-radius:2px;margin:0 0 1.1rem}
.nlm-card h3{font-family:var(--font-display);font-size:clamp(1.55rem,1.15rem + 1.7vw,2.25rem);
  color:var(--dark);line-height:1.18;margin:0 0 .9rem;max-width:none;text-wrap:balance}
.nlm-card h3 .alt{display:block;color:var(--sage)}
.nlm-sub{font-size:.92rem;color:rgba(15,42,53,.78);margin:0 0 1.5rem;max-width:none}
.nlm-sub b{font-weight:500;color:var(--dark);box-shadow:inset 0 -.42em 0 var(--mint-soft)}
.nlm-row{display:grid;gap:.9rem;grid-template-columns:1fr}
@media(min-width:520px){.nlm-row{grid-template-columns:1fr 1fr}}
.nlm-card label{display:block;font-size:.82rem;color:var(--teal);margin-bottom:1rem}
.nlm-card input,.nlm-card select{width:100%;margin-top:.35rem;padding:.8rem .95rem;border-radius:10px;
  border:1px solid rgba(15,42,53,.16);background:#fff;font-family:inherit;font-size:.95rem;color:var(--dark)}
.nlm-card input:focus,.nlm-card select:focus{outline:2px solid var(--mint);border-color:var(--teal)}
.nlm-card .btn{width:100%;justify-content:center}
.nlm-fine{font-size:.74rem;color:var(--sage);margin:.8rem 0 0;text-align:center}
.nlm-msg{font-size:.85rem;color:var(--teal);margin:.6rem 0 0;text-align:center;min-height:1.2em}

/* ── COOKIE ── */
.cc{position:fixed;inset:auto 0 0 0;z-index:200;padding:1rem;display:none}
.cc.show{display:block}
.cc-inner{max-width:1000px;margin-inline:auto;background:var(--dark);color:#fff;border-radius:var(--rcard);
  padding:1.5rem 1.7rem;box-shadow:0 -8px 44px rgba(0,0,0,.36);border:1px solid rgba(255,255,255,.1)}
.cc h4{font-size:var(--s-1);color:#fff;margin:0 0 .6rem}
.cc p{font-size:var(--s--1);color:rgba(255,255,255,.8);margin:0 0 1.1rem;max-width:78ch}
.cc-btns{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
/* Reject reads as clearly as Accept: equal prominence on the dark panel. */
.cc-btns .btn-ghost{background:var(--cream);color:var(--dark);border-color:var(--cream)}
.cc-btns .btn-ghost:hover{background:#fff;color:var(--dark);border-color:#fff}
.cc-link{background:none;border:0;color:var(--mint);text-decoration:underline;cursor:pointer;
  font-family:inherit;font-size:var(--s--1);padding:.6rem .4rem}
.cc-prefs{display:none;margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.16)}
.cc-prefs.show{display:block}
.cc-row{display:flex;align-items:flex-start;gap:.9rem;margin-bottom:1rem}
.cc-row label{font-size:var(--s--1);color:rgba(255,255,255,.86)}
.cc-row b{display:block;color:#fff;font-weight:600;margin-bottom:.15rem}
.cc-row input{margin-top:.3rem;width:18px;height:18px;accent-color:var(--mint)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;background:#fff;color:var(--dark);padding:.7rem 1.1rem;border-radius:8px;z-index:300}
.verify{background:#FFF8E6;border:1px solid #E8D9A8;border-radius:8px;padding:.15rem .5rem;
  font-size:.8rem;color:#6B5518;font-style:normal}

/* ═══ ROUND 10 — MOBILE ═════════════════════════════════════
   Phones get the same ideas as desktop, expressed differently:
   swipe instead of sticky, dividers that fill as you scroll, and
   type sized so every statement holds one line. */

/* Reading progress, a quiet mint line at the very top */

/* Swipeable rails: cards snap, the next one peeks, dots show position */
.swipe-dots{display:none;gap:.45rem;justify-content:center;margin-top:1.1rem}
.swipe-dots i{width:7px;height:7px;border-radius:50%;background:rgba(15,42,53,.22);transition:.25s}
.swipe-dots i.on{background:var(--teal);transform:scale(1.25)}
.band-dark .swipe-dots i,.band-teal .swipe-dots i{background:rgba(255,255,255,.28)}
.band-dark .swipe-dots i.on,.band-teal .swipe-dots i.on{background:var(--mint)}
.swipe-hint{display:none;align-items:center;gap:.4rem;justify-content:center;margin-top:.7rem;
  font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sage)}
.swipe-hint span{display:inline-block;animation:nudge 1.8s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}

@media(max-width:860px){
  .swipe-dots{display:flex}
  .swipe-hint{display:flex}

  /* generic swipe rail */
  /* A rail must never be wider than the screen: the negative margins here
     were pushing every page sideways, which is what broke the headings,
     the contact form and the footer. Width is capped and the browser is
     left to decide gesture direction, so a vertical drag scrolls the page. */
  .swipe{display:flex!important;flex-direction:row!important;gap:1rem;
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain;
    max-width:100%;margin:0;padding:0 0 .4rem}
  .swipe::-webkit-scrollbar{display:none}
  .swipe > *{flex:0 0 78%;scroll-snap-align:start;min-width:0}

  /* article cards keep their shape inside the rail */
  .rail.swipe .acard{margin:0}

  /* separators fill left to right on scroll, as they do on desktop */
  .mandate,.pillar{position:relative}
  .mandate::after,.pillar::after{content:'';position:absolute;left:0;bottom:0;height:1px;
    width:calc(var(--gl,0) * 100%);background:var(--mint);transition:width .25s linear}
  .mandate:last-child::after,.pillar:last-child::after{display:none}

  /* stock image bands eat the screen on a phone */
  .band-img{display:none}

  /* press feedback, so cards feel like objects rather than pictures */
  .acard:active,.fcard:active,.b1 .c:active,.sec-card:active,.twc:active{transform:scale(.985)}
}

/* ═══ ROUND 11 — late overrides (kept last so nothing outranks them) ═══ */
@media(max-width:900px){
  /* logo left, hamburger right, in that order */
  .nav{grid-template-columns:auto 1fr auto!important}
  .nav .brand,.brand{justify-self:start!important;order:0!important;margin:0 auto 0 0!important}
  .burger{order:9!important;margin-left:auto!important;margin-right:0!important}
}
@media(max-width:760px){
  /* contact: bigger heading, two columns, darker film over the video */
  .contact-copy h2{font-size:clamp(1.65rem,7.2vw,2.15rem);line-height:1.2}
  .contact-copy .two{grid-template-columns:1fr 1fr;gap:1rem 1.1rem}
  .contact-copy .two p{font-size:.8rem;line-height:1.5}
  .contact-copy h4{font-size:.95rem;display:flex;align-items:flex-start;gap:.35rem}
  .contact-copy h4 svg{width:15px;height:15px;flex:0 0 15px;margin-top:.15rem}
  .contact-media::after{background:linear-gradient(120deg,rgba(15,42,53,.93),rgba(15,42,53,.8))}
}

/* Sourced figures: a quiet reference marker rather than an editing note */
.cite{font-size:.72em;vertical-align:super;color:var(--teal);text-decoration:none;font-weight:600}
.cite:hover{color:var(--dark)}
.sources{margin:1.6rem 0 0;padding-top:1.1rem;border-top:1px solid rgba(15,42,53,.14);
  font-size:.8rem;color:rgba(15,42,53,.7);line-height:1.6}
.band-dark .sources,.band-teal .sources{border-top-color:rgba(255,255,255,.18);color:rgba(255,255,255,.7)}
.sources b{font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:.68rem;
  display:block;margin-bottom:.4rem;color:var(--teal)}
.band-dark .sources b,.band-teal .sources b{color:var(--mint)}
.sources a{color:inherit}

/* 30 Sep 2026: the side columns size to their links, so a longer menu (Resources)
   can never push into the logo; spacing tightens smoothly on smaller screens. */
@media(min-width:901px){
  .nav{grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr);column-gap:clamp(1.4rem,2.4vw,2.6rem)}
  .nav-l,.nav-r,.nav-shell.stuck .nav-l,.nav-shell.stuck .nav-r{gap:clamp(1.1rem,1.9vw,2.6rem)}
}
/* The footer "New" tag breathes: a slow, faint mint glow. */
.flink .new-tag{animation:newGlow 2.8s ease-in-out infinite}
@keyframes newGlow{0%,100%{opacity:.7;text-shadow:0 0 0 rgba(180,223,210,0)}50%{opacity:1;text-shadow:0 0 10px rgba(180,223,210,.8)}}
@media (prefers-reduced-motion: reduce){.flink .new-tag{animation:none}}

/* For Buyers menu (6 Oct 2026): Businesses for Sale carries a glowing dot and
   a live count, refreshed on every build by seo_pass.py from listings_data.py */
.sub a.live{font-weight:600;display:flex;align-items:center;gap:.6rem;background:var(--cream);white-space:nowrap}
.sub a.live::before{content:'';flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:#7CC9AE;
  box-shadow:0 0 0 4px rgba(180,223,210,.55),0 0 14px 4px rgba(180,223,210,.9);animation:livePulse 2.4s ease-in-out infinite}
.sub a.live em{margin-left:auto;font-style:normal;font-size:.7rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  background:var(--dark);color:var(--mint);padding:.2rem .55rem;border-radius:999px;white-space:nowrap}
.sub a.live em:empty{display:none}
.nav-mobile a.live{display:flex;align-items:center;gap:.55rem}
.nav-mobile a.live::before{content:'';flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px 3px rgba(180,223,210,.7)}
.nav-mobile a.live em{font-style:normal;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;background:var(--mint);color:var(--dark);padding:.12rem .5rem;border-radius:999px}
.nav-mobile a.live em:empty{display:none}
@keyframes livePulse{0%,100%{box-shadow:0 0 0 3px rgba(180,223,210,.45),0 0 10px 2px rgba(180,223,210,.7)}50%{box-shadow:0 0 0 5px rgba(180,223,210,.25),0 0 18px 6px rgba(180,223,210,.95)}}
@media(prefers-reduced-motion:reduce){.sub a.live::before{animation:none}}

/* Footer (6 Oct 2026): Businesses for Sale with its live dot, and the Firm
   links share the Resources arrow hover */
.flink .fdot{flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 3px rgba(180,223,210,.25),0 0 10px 3px rgba(180,223,210,.6);animation:livePulse 2.4s ease-in-out infinite}
.flink em.live-n{font-style:normal;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(180,223,210,.55);color:var(--mint);padding:.08rem .45rem;border-radius:999px}
.flink em.live-n:empty{display:none}
@media(prefers-reduced-motion:reduce){.flink .fdot{animation:none}}