/* ============================================================
   ELEV8 v3 · SHELL + CONTENT TEMPLATE
   Two things live here, both shared by every generated page:
     1. the shell chrome (nav, footer) that _template.html emits
     2. the CONTENT TEMPLATE vocabulary (.c-*) that the 27 town and
        niche SEO pages, the 5 case studies and the plain content
        pages pour their existing copy into.
   Tokens only, from css/v3.css. No new colours.
   ============================================================ */

/* ---------------------------------------------------------- nav
   The overlay is a SIBLING of the sliding bar: a transformed ancestor
   would hijack position:fixed on the overlay. */
.nav{position:fixed;inset:0 0 auto 0;z-index:var(--z-nav)}
.nav-bar{transition:transform .45s var(--ease-out),background .35s ease,border-color .35s ease;border-bottom:1px solid transparent}
.nav.scrolled .nav-bar{background:rgba(10,5,24,.85);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.nav.hidden .nav-bar{transform:translateY(-110%)}
.nav.open .nav-bar{transform:none;background:transparent;border-bottom-color:transparent;backdrop-filter:none}
.nav-in{display:flex;align-items:center;gap:1.4rem;padding-block:.75rem}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.08rem;color:var(--star);letter-spacing:-.01em}
.brand img{width:34px;height:34px;border-radius:9px;background:linear-gradient(150deg,#2d115b,#110823);padding:3px;border:1px solid var(--line)}
.menu-desktop{display:none;align-items:center;gap:1.35rem;margin-left:auto}
.menu-desktop a:not(.btn){font-size:.96rem;font-weight:480;color:var(--star-dim);transition:color .2s ease;padding:.35rem 0}
.menu-desktop a:not(.btn):hover,.menu-desktop a[aria-current="page"]{color:var(--star)}
.menu-desktop a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--ember);text-underline-offset:6px}
.menu-desktop .btn{padding:.6rem 1.25rem;font-size:.95rem}
.burger{margin-left:auto;width:48px;height:48px;border-radius:12px;position:relative;z-index:2}
.burger::before,.burger::after,.burger span{content:"";position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:var(--star);transition:transform .35s var(--ease-out),opacity .25s ease,top .35s var(--ease-out)}
.burger::before{top:17px}.burger span{top:23px}.burger::after{top:29px}
.nav.open .burger::before{top:23px;transform:rotate(45deg)}
.nav.open .burger span{opacity:0}
.nav.open .burger::after{top:23px;transform:rotate(-45deg)}
.menu-overlay{position:fixed;inset:0;background:rgba(7,3,15,.97);opacity:0;pointer-events:none;transition:opacity .3s ease;display:flex;flex-direction:column;justify-content:center;overflow-y:auto}
.nav.open .menu-overlay{opacity:1;pointer-events:auto}
.menu-overlay nav{display:flex;flex-direction:column;align-items:center;gap:1.35rem;padding:4.5rem 1.5rem 2.5rem}
.menu-overlay a:not(.btn){font-size:1.5rem;font-weight:620;color:var(--star)}
.menu-overlay a[aria-current="page"]{color:var(--amber)}
.menu-overlay .btn{margin-top:.6rem;padding:1rem 2.2rem;font-size:1.1rem;width:min(100%,20rem);justify-content:center}
.menu-overlay .menu-meta{margin-top:1.4rem;display:flex;flex-direction:column;align-items:center;gap:.55rem}
.menu-overlay .menu-meta a{font-size:1rem;font-weight:480;color:var(--star-dim)}
body.menu-open{overflow:hidden}
@media (min-width:60rem){
  .burger,.menu-overlay{display:none}
  .menu-desktop{display:flex}
  .nav-in{padding-block:.85rem}
}

/* ---------------------------------------------------------- footer */
.footer{position:relative;border-top:1px solid var(--line);padding-block:clamp(2.75rem,7vw,4.5rem) 1.8rem;background:var(--space-0)}
.foot-grid{display:flex;flex-wrap:wrap;gap:2.2rem 4rem;justify-content:space-between;align-items:flex-start}
.foot-brand{max-width:20rem}
.foot-brand .brand{margin-bottom:.85rem}
.foot-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,9.5rem),1fr));gap:1.7rem 1.4rem;width:100%}
.foot-links h4{font-size:.98rem;color:var(--star);margin-bottom:.6rem;font-weight:640}
.foot-links ul{list-style:none}
.foot-links li{margin-bottom:.2rem}
.foot-links a{color:var(--star-faint);font-size:.93rem;transition:color .2s ease;display:inline-block;padding:.18rem 0}
.foot-links a:hover{color:var(--star)}
@media (min-width:47.5rem){
  .foot-links{gap:2rem 2.6rem}
  .foot-links li{margin-bottom:.35rem}
}
.foot-legal{margin-top:2.3rem;padding-top:1.3rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:.8rem 1.5rem;justify-content:space-between;color:var(--star-faint);font-size:.9rem}
.foot-legal a{color:var(--star-dim);text-decoration:none}
.foot-legal a:hover{color:var(--star);text-decoration:underline;text-decoration-color:var(--ember);text-underline-offset:3px}
.foot-legal-links a{display:inline-block;padding-block:.2rem}

/* ============================================================
   CONTENT TEMPLATE
   One layout carrying a third of the site. Reading-first: a single
   measured column of prose, a sticky proof rail on desktop, and a
   small set of repeatable furniture (steps, cards, FAQ, closing CTA).
   Designed at 390px, enhanced upward. Nothing here animates layout.
   ============================================================ */

/* sticky nav clearance for every in-page anchor target */
:target,[id]{scroll-margin-top:5.5rem}

/* --- hero ------------------------------------------------- */
.c-hero{padding-block:calc(var(--sect-tight) + 3.6rem) var(--sect-tight);position:relative;overflow:hidden}
.c-hero::before{
  content:"";position:absolute;inset:-30% -10% auto -10%;height:120%;
  background:radial-gradient(58% 46% at 22% 0%,rgba(64,30,124,.55),transparent 68%),
             radial-gradient(38% 34% at 88% 12%,rgba(107,70,201,.22),transparent 70%);
  pointer-events:none;
}
.c-hero>*{position:relative;z-index:1}
.c-hero h1{margin-bottom:.55rem}
.c-hero .c-eyebrow{margin-bottom:1rem;display:block;font-size:clamp(1.05rem,4.2vw,1.22rem)}
.c-hero .lead{margin-top:.9rem;max-width:38ch}
@media (min-width:47.5rem){.c-hero .lead{max-width:58ch}}
.c-hero .cta-stack{margin-top:1.7rem}

/* breadcrumbs: real navigation, small but never tracked-uppercase */
.c-crumbs{font-size:.9rem;color:var(--star-faint);margin-bottom:1.15rem;line-height:1.5}
.c-crumbs a{color:var(--star-faint);text-decoration:none}
.c-crumbs a:hover{color:var(--star);text-decoration:underline;text-decoration-color:var(--ember);text-underline-offset:3px}
.c-crumbs .c-sep{margin-inline:.45rem;opacity:.55}
.c-crumbs [aria-current]{color:var(--star-dim)}

/* --- bands ------------------------------------------------ */
.c-band{padding-block:var(--sect-tight)}
.c-band-tint{background:linear-gradient(180deg,var(--space-2),var(--space-1) 70%);border-block:1px solid var(--line)}

/* --- split: prose + proof rail ---------------------------- */
.c-split{display:grid;gap:2.4rem;align-items:start}
@media (min-width:62rem){
  .c-split{grid-template-columns:minmax(0,1fr) 21.5rem;gap:3.6rem}
  .c-aside{position:sticky;top:5.5rem}
}

/* --- prose ------------------------------------------------ */
.c-prose{max-width:68ch}
.c-prose h2{font-size:clamp(1.55rem,6.2vw,2.15rem);margin-top:2.6rem;margin-bottom:.85rem}
.c-prose>h2:first-child{margin-top:0}
.c-prose h3{margin-top:1.9rem;margin-bottom:.55rem}
.c-prose p{margin-bottom:1.05rem}
.c-prose ul,.c-prose ol{margin:0 0 1.3rem 1.15rem;display:grid;gap:.55rem}
.c-prose li{padding-left:.25rem}
.c-prose ul{list-style:none;margin-left:0}
.c-prose ul>li{position:relative;padding-left:1.5rem}
.c-prose ul>li::before{content:"";position:absolute;left:.35rem;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--ember);opacity:.85}
.c-prose ol{list-style:decimal;margin-left:1.35rem}
.c-prose ol>li::marker{color:var(--amber);font-weight:640}
.c-prose blockquote{margin:0 0 1.3rem;font-family:var(--font-voice);font-style:italic;color:var(--amber);font-size:1.1rem;line-height:1.5}
.c-prose b,.c-prose strong{color:var(--star);font-weight:620}

/* --- section head ----------------------------------------- */
.c-head{margin-bottom:1.9rem;max-width:52ch}
.c-head h2{font-size:clamp(1.75rem,7vw,2.5rem)}
.c-head p{margin-top:.7rem}

/* --- steps ------------------------------------------------ */
.c-steps{display:grid;gap:1rem;list-style:none;counter-reset:none}
@media (min-width:40rem){.c-steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:62rem){.c-steps{grid-template-columns:repeat(4,1fr);gap:1.15rem}}
.c-step{padding:1.5rem 1.35rem;border-radius:18px;position:relative}
.c-step h3{font-size:1.16rem;margin-bottom:.45rem}
.c-step p{font-size:.98rem}
.c-step-n{width:2.1rem;height:2.1rem;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,152,24,.14);border:1px solid rgba(255,152,24,.4);color:var(--amber);
  font-weight:700;font-size:1rem;margin-bottom:.9rem}
.c-step-t{display:block;margin-top:.8rem;font-size:.86rem;color:var(--star-faint)}

/* --- card grid -------------------------------------------- */
.c-cards{display:grid;gap:1rem}
@media (min-width:40rem){.c-cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:66rem){.c-cards{grid-template-columns:repeat(4,1fr)}}
.c-cards.is-two{grid-template-columns:1fr}
@media (min-width:48rem){.c-cards.is-two{grid-template-columns:repeat(2,1fr)}}
.c-card{position:relative;display:block;padding:1.6rem 1.35rem;border-radius:18px;overflow:hidden;
  transition:transform .4s var(--ease-out),border-color .3s ease}
.c-card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(340px circle at var(--sx) var(--sy),rgba(107,70,201,.18),transparent 70%)}
.c-card:hover{transform:translateY(-3px);border-color:var(--line-bright)}
.c-card:hover::after{opacity:1}
.c-card h3{font-size:1.16rem;margin-bottom:.5rem}
.c-card p{font-size:.98rem}
.c-card img{border-radius:12px;margin-bottom:.9rem;width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--space-2)}
.c-more{display:inline-block;margin-top:.9rem;color:var(--amber);font-weight:620;font-size:.95rem}
.c-ico{display:none}
.c-shot img{margin-bottom:0}
.c-chrome{display:none}
.c-shot-meta{margin-top:.7rem;font-size:.92rem;color:var(--star-faint)}

/* --- FAQ -------------------------------------------------- */
.c-faq{max-width:52rem;border-top:1px solid var(--line)}
.c-faq details{border-bottom:1px solid var(--line)}
.c-faq summary{list-style:none;cursor:pointer;padding:1.15rem 2.6rem 1.15rem 0;position:relative;
  font-weight:620;color:var(--star);font-size:1.06rem;line-height:1.35;min-height:44px}
.c-faq summary::-webkit-details-marker{display:none}
.c-faq summary::after{content:"";position:absolute;right:.55rem;top:1.55rem;width:11px;height:11px;
  border-right:2px solid var(--amber);border-bottom:2px solid var(--amber);
  transform:rotate(45deg);transition:transform .3s var(--ease-out)}
.c-faq details[open] summary::after{transform:rotate(-135deg)}
.c-faq summary:hover{color:var(--amber)}
.c-faq .c-faq-a,.c-faq details>p{padding:0 0 1.25rem;max-width:66ch;color:var(--star-dim)}

/* --- closing CTA card ------------------------------------- */
.c-cta{text-align:center;padding:clamp(1.8rem,6vw,3rem) clamp(1.2rem,5vw,2.4rem);border-radius:22px;max-width:46rem;margin-inline:auto}
.c-cta h2{font-size:clamp(1.6rem,6.5vw,2.25rem);margin-bottom:.8rem}
.c-cta p{max-width:48ch;margin-inline:auto}
.c-cta .cta-stack{justify-content:center;margin-top:1.5rem}
.c-alt{margin-top:1.1rem}

/* --- proof rail (Google reviews) -------------------------- */
.c-proof{text-align:left;padding:1.4rem 1.25rem;border-radius:18px;background:var(--panel);border:1px solid var(--line)}
.c-proof-bare{background:none;border:0;padding:0}
.c-proof-head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.9rem;font-size:.95rem;color:var(--star-dim)}
.c-stars{color:var(--amber);letter-spacing:.12em;font-size:1rem}
.c-proof-head b{color:var(--star)}
.c-proof-track{display:grid;gap:.85rem;max-height:26rem;overflow-y:auto;padding-right:.35rem;
  scrollbar-width:thin;scrollbar-color:var(--violet-3) transparent}
.c-proof-card{padding:1.05rem 1.1rem;border-radius:14px}
.c-who{display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem;flex-wrap:wrap}
.c-who>span{min-width:0}
.c-who .c-stars{margin-left:auto}
.c-who>span{display:flex;flex-direction:column}
.c-who b{color:var(--star);font-size:.98rem}
.c-av{width:2rem;height:2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  background:var(--violet-2);color:var(--star);font-size:.82rem;font-weight:700}
.c-role{font-size:.82rem;color:var(--star-faint);line-height:1.35}
.c-proof-card blockquote{font-size:.95rem;color:var(--star-dim);line-height:1.6}
.c-proof-card blockquote.is-clamp{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.c-more-btn{margin-top:.55rem;color:var(--amber);font-weight:620;font-size:.9rem;padding:.35rem 0;min-height:44px}
.c-proof-hint{margin-top:.7rem;text-align:center}

/* --- price tiers ------------------------------------------ */
.c-tiers{display:grid;gap:1.1rem}
@media (min-width:52rem){.c-tiers{grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}}
.c-tier{padding:1.7rem 1.45rem;border-radius:20px}
.c-tier.is-hot{border-color:rgba(255,152,24,.45);box-shadow:0 16px 46px -22px rgba(255,152,24,.5)}
.c-tier h3{margin-bottom:.5rem}
.c-amt{display:block;font-family:var(--font-display);font-size:clamp(2rem,7vw,2.6rem);font-weight:700;color:var(--star);line-height:1.05;margin-block:.4rem .2rem;letter-spacing:-.03em}
.c-per{color:var(--star-faint);font-size:.92rem}
.c-tier ul{list-style:none;margin-top:1rem;display:grid;gap:.5rem}
.c-tier li{position:relative;padding-left:1.4rem;font-size:.97rem}
.c-tier li::before{content:"";position:absolute;left:.25rem;top:.68em;width:6px;height:6px;border-radius:50%;background:var(--ember)}

/* --- tables ----------------------------------------------- */
.c-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:16px;margin-bottom:1.4rem}
.c-tablewrap table,.c-table{border-collapse:collapse;width:100%;min-width:32rem;font-size:.96rem}
.c-tablewrap th,.c-tablewrap td,.c-table th,.c-table td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.c-tablewrap th,.c-table th{color:var(--star);font-weight:620;background:rgba(38,22,74,.4)}
.c-tablewrap tr:last-child td{border-bottom:0}

/* --- stats / panels / misc -------------------------------- */
.c-stats{display:grid;gap:.9rem;margin-block:1.4rem}
@media (min-width:40rem){.c-stats{grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))}}
.c-stat{padding:1.2rem 1.1rem;border-radius:16px}
.c-stat>b{display:block;font-size:1.65rem;color:var(--star);line-height:1.1;margin-bottom:.3rem;font-weight:700;letter-spacing:-.02em}
/* CHILD selector, deliberately. The review cell is
   <span>from <span data-rev-count>3</span> Google reviews</span>, and a
   descendant rule turned the hydration hook into a block, so every page on the
   site read "5.0 / from / 3 / Google reviews" down four lines. */
.c-stat>span{display:block;color:var(--star-dim);font-size:.98rem;line-height:1.35}
.c-stat>small{display:block;margin-top:.35rem;color:var(--star-faint);font-size:.86rem;line-height:1.4}
.c-panel{padding:1.6rem 1.4rem;border-radius:20px;margin-bottom:1.4rem}
.c-panel h2,.c-panel h3{margin-top:0}
.c-panel-admin{border-color:var(--line-bright)}
.c-list{list-style:none;display:grid;gap:.55rem;margin:1rem 0 0}
.c-list li{position:relative;padding-left:1.5rem}
.c-list li::before{content:"";position:absolute;left:.35rem;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--ember)}
.c-note{color:var(--star-faint);font-size:.95rem;margin-block:1rem}
.c-meta{color:var(--star-faint);margin-bottom:1.2rem}
.c-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-block:1.2rem}
.c-chips span,.c-chips li{border:1px solid var(--line);border-radius:999px;padding:.35rem .9rem;font-size:.9rem;color:var(--star-dim);list-style:none}
.c-quotes{display:grid;gap:1rem}
@media (min-width:48rem){.c-quotes{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}}
.c-quote{padding:1.3rem 1.2rem;border-radius:16px;font-size:.97rem}
.c-bigquote{font-family:var(--font-voice);font-style:italic;font-size:clamp(1.2rem,5vw,1.6rem);color:var(--amber);line-height:1.4;max-width:34ch;margin-block:1.4rem}
.c-code{font-size:clamp(4rem,20vw,8rem);font-weight:800;line-height:1;color:var(--violet-3);letter-spacing:-.05em;margin-bottom:.6rem}

/* the 404 page is a single centred block, not a content page */
.c-mid{min-height:70vh;display:flex;flex-direction:column;justify-content:center;text-align:center;padding-block:calc(var(--sect-tight) + 4rem) var(--sect-tight)}
.c-mid .cta-stack{justify-content:center;margin-top:1.6rem}
.c-mid p{max-width:48ch;margin-inline:auto}

/* ============================================================
   CONTENT MODULE KIT
   The 27 town and niche SEO pages are the site's whole search
   asset, so nothing here removes a word. It gives the words
   rhythm, proof and visual punctuation instead: no more than
   150 words of unbroken prose, with real client screenshots,
   a drawn timeline and a drawn coverage diagram doing the
   breaking.

   ZERO JAVASCRIPT. Every animation below runs off the `.on`
   class the one IntersectionObserver in js/main.js already
   sets. No second observer, no scroll listener, no library.
   Every one states its own prefers-reduced-motion fallback
   rather than leaning on the blanket rule in v3.css.
   Tokens only. No new colours.
   ============================================================ */

.c-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* --- M1 · ownership timeline ------------------------------
   The existing four steps, verbatim, plus the fifth beat that
   answers the only objection Kort hears on every call: am I
   paying forever. Drawn on a line so the reader sees the end
   from the start. */
.c-linewrap{position:relative}
.c-line{list-style:none;display:grid;gap:1.7rem;margin:0}
.c-line-step{position:relative;padding-left:3.5rem;min-height:2.2rem}
.c-line-step h3{font-size:1.14rem;margin-bottom:.4rem}
.c-line-step p{font-size:.98rem}
.c-line-n{position:absolute;left:0;top:-.15rem;width:2.1rem;height:2.1rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;
  background:var(--space-1);border:1px solid var(--line-bright);color:var(--star-faint);
  transition:background .55s var(--ease-out),border-color .55s var(--ease-out),color .55s var(--ease-out);
  transition-delay:calc(var(--i,0) * 90ms)}
.js .c-linewrap.on .c-line-n{background:rgba(255,152,24,.14);border-color:rgba(255,152,24,.55);color:var(--amber)}
.c-line-step.is-yours h3{color:var(--amber)}
.c-line-step.is-yours .c-line-n::after{content:"";position:absolute;inset:-6px;border-radius:50%;
  border:1px solid rgba(255,152,24,.5);opacity:.85}
/* the only thing still moving after the reveal, because it is
   the only thing that persists after the three months */
.js .c-linewrap.on .is-yours .c-line-n::after{animation:c-halo 6s ease-in-out infinite}
@keyframes c-halo{0%,100%{opacity:.22;transform:scale(1)}50%{opacity:.9;transform:scale(1.14)}}
/* The spine is drawn as a connector on each step rather than as one
   absolutely positioned SVG, for two reasons that each cost a rebuild
   to find. An <svg> is a REPLACED element, so top plus bottom with
   height auto is over-constrained and the box collapses to the viewBox
   intrinsic size, 4 by 100 CSS px; and even sized correctly it runs to
   the bottom of the container, which is 140px past the last node,
   because CSS cannot know where that node is and this kit adds no
   JavaScript. Per-step connectors end exactly at node five, and growing
   them in sequence reads better than one uniform sweep: time flows one
   way, and the line ends at ownership.
   ::before is the unlit track, ::after is the lit line that grows over
   it, in that order so the paint order is right without a z-index. */
.c-line-step::before,.c-line-step::after{content:"";position:absolute;
  left:calc(1.05rem - 1px);top:1.95rem;bottom:-1.55rem;width:2px;border-radius:2px}
.c-line-step::before{background:var(--line)}
.c-line-step::after{background:linear-gradient(180deg,var(--c1,#401e7c),var(--c2,#6b46c9));
  transform:scaleY(0);transform-origin:top center}
.c-line-step:last-child::before,.c-line-step:last-child::after{content:none}
.js .c-linewrap.on .c-line-step::after{transform:none;
  transition:transform .5s var(--ease-out);transition-delay:calc(var(--i,0) * 180ms + .1s)}
@media (prefers-reduced-motion:reduce){
    .c-line-step::after{transform:none;transition:none;transition-delay:0s}
  .js .c-linewrap .c-line-n{background:rgba(255,152,24,.14);border-color:rgba(255,152,24,.55);
    color:var(--amber);transition:none;transition-delay:0s}
  .js .c-linewrap.on .is-yours .c-line-n::after{animation:none;opacity:.85;transform:none}
}
@media (min-width:62rem){
  .c-line{grid-template-columns:repeat(5,1fr);gap:1.4rem}
  .c-line-step{padding-left:0;padding-top:3.1rem}
  .c-line-n{top:0}
  /* horizontal at desktop: from this node across the grid gap to the
     next one, so the run of the line is the run of the process */
  .c-line-step::before,.c-line-step::after{left:2.55rem;top:calc(1.05rem - 1px);
    bottom:auto;right:-1.4rem;width:auto;height:2px}
  .c-line-step::after{background:linear-gradient(90deg,var(--c1,#401e7c),var(--c2,#6b46c9));
    transform:scaleX(0);transform-origin:left center}
  .js .c-linewrap.on .c-line-step::after{transform:none}
}

/* --- M2 · real-client proof strip -------------------------
   The one interrupter that also proves the argument of the
   business: real businesses, real websites, live on their own
   domains. The browser chrome shows the real host name, and
   the Live / Demo tag is rendered from the portfolio status,
   never chosen. */
.c-proofstrip{display:grid;gap:1rem}
.c-strip-more{margin-top:1.5rem}
@media (min-width:40rem){
  .c-proofstrip{grid-template-columns:repeat(3,1fr);align-items:start}
  .c-proofstrip.is-f2{grid-template-columns:2fr 1fr}
  .c-proofstrip.is-f2>:first-child{grid-row:1 / span 2}
  .c-proofstrip.is-f3{grid-template-columns:1fr 2fr}
  .c-proofstrip.is-f3>:first-child{grid-column:2;grid-row:1 / span 2}
  .c-proofstrip.is-f3>:nth-child(2){grid-column:1;grid-row:1}
  .c-proofstrip.is-f3>:nth-child(3){grid-column:1;grid-row:2}
  .c-proofstrip.is-f4{grid-template-columns:repeat(2,1fr)}
  .c-proofstrip.is-f4>:first-child{grid-column:1 / -1}
}
.c-proofcard{display:block;padding:.7rem;border-radius:16px;position:relative;overflow:hidden;
  transition:transform .4s var(--ease-out),border-color .3s ease}
.c-proofcard::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .35s ease;
  background:radial-gradient(320px circle at var(--sx) var(--sy),rgba(107,70,201,.2),transparent 70%)}
@media (hover:hover){
  .c-proofcard:hover{transform:translateY(-3px);border-color:var(--line-bright)}
  .c-proofcard:hover::after{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .c-proofcard{transition:none}
  .c-proofcard:hover{transform:none}
  .c-proofcard::after{display:none}
}
.c-proofcard>*,.c-proofshot>*{position:relative;z-index:1}
/* .c-chrome is display:none in the content template; it is
   lifted here only, and only inside these two modules */
.c-proofcard .c-chrome,.c-proofshot .c-chrome{display:flex;align-items:center;gap:.32rem;
  padding:.45rem .6rem;border:1px solid var(--line);border-bottom:0;border-radius:11px 11px 0 0;
  background:rgba(13,6,30,.72);font-size:.78rem;color:var(--star-faint);overflow:hidden}
.c-proofcard .c-chrome i,.c-proofshot .c-chrome i{width:7px;height:7px;border-radius:50%;
  background:var(--line-bright);flex:0 0 auto}
.c-proofcard .c-chrome>span,.c-proofshot .c-chrome>span{margin-left:.4rem;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;min-width:0}
.c-proofcard .c-shot{display:block;border:1px solid var(--line);border-radius:0 0 11px 11px;overflow:hidden}
.c-proofcard .c-shot img,.c-proofshot img{width:100%;aspect-ratio:16/10;object-fit:cover;
  object-position:top center;background:var(--space-2)}
.c-proofcard .c-shot-meta{display:flex;align-items:center;gap:.7rem;margin-top:.8rem;
  padding:0 .2rem .15rem;min-height:44px}
.c-proofcard .c-shot-meta>span:first-child{display:flex;flex-direction:column;min-width:0}
.c-proofcard .c-shot-meta strong{color:var(--star);font-size:1rem;line-height:1.3}
.c-proofcard .c-shot-meta span span{font-size:.86rem;color:var(--star-faint);line-height:1.35}
.c-tag{margin-left:auto;flex:0 0 auto;border-radius:999px;padding:.2rem .65rem;font-size:.78rem;
  font-weight:620}
.c-tag.is-live{color:var(--spark);border:1px solid rgba(35,214,236,.42);background:rgba(35,214,236,.08)}
.c-tag.is-demo{color:var(--star-faint);border:1px solid var(--line)}

/* M2b · one captioned screenshot, narrow enough for the prose column */
.c-proofshot{margin:2.1rem 0;max-width:34rem}
.c-proofshot a{display:block;border-radius:12px}
.c-proofshot picture{display:block;border:1px solid var(--line);border-radius:0 0 11px 11px;overflow:hidden}
.c-proofshot figcaption{margin-top:.7rem;font-size:.92rem;color:var(--star-faint);line-height:1.5}

/* --- M3 · three ways to get a website ---------------------
   The only module read across rather than down, which is why
   it is the strongest texture change on the page. It never
   states a competitor's price, timescale or brand name. */
.c-versus table{background:var(--space-1)}
.c-versus tbody th{position:sticky;left:0;z-index:1;background:var(--panel-solid);
  min-width:9.5rem;font-size:.93rem}
.c-versus thead th{font-size:.93rem;vertical-align:bottom}
.c-versus td{color:var(--star-dim)}
.c-versus .is-ours{color:var(--star);background:rgba(38,22,74,.34)}
.c-versus thead .is-ours{color:var(--amber)}
.c-versus tbody tr:last-child .is-ours{font-weight:620}
/* the verdict column warms AFTER the other two have settled */
.c-versus .is-ours{box-shadow:inset 2px 0 0 0 var(--line),inset -2px 0 0 0 var(--line);
  transition:box-shadow .6s var(--ease-out) .2s}
.js .c-versus.on .is-ours{box-shadow:inset 2px 0 0 0 rgba(255,152,24,.55),inset -2px 0 0 0 rgba(255,152,24,.55)}
@media (prefers-reduced-motion:reduce){
  .c-versus .is-ours{box-shadow:inset 2px 0 0 0 rgba(255,152,24,.55),inset -2px 0 0 0 rgba(255,152,24,.55);
    transition:none}
}

/* --- M4 · what you actually get ---------------------------
   The five existing bullets, verbatim and in order, each with
   a drawn tick, plus the things people expect to be charged
   extra for and are not. Copied from /care-plan, not memory. */
.c-get{display:grid;gap:1.2rem;margin-block:1.6rem}
@media (min-width:48rem){.c-get{grid-template-columns:1.35fr 1fr;gap:1.7rem;align-items:start}}
.c-get ul{list-style:none;display:grid;gap:.7rem;margin:0}
.c-get ul>li{display:flex;gap:.65rem;align-items:flex-start;padding-left:0;position:static}
.c-prose .c-get ul>li::before,.c-get ul>li::before{content:none}
.c-get-out{padding:1.25rem 1.2rem;border-radius:18px}
.c-get-out h3{font-size:1.05rem;margin-bottom:.75rem;color:var(--star)}
.c-get-out li{font-size:.96rem}
.c-get-out .small{margin-top:.9rem}
.c-tick{width:1.2rem;height:1.2rem;flex:0 0 auto;margin-top:.3em;color:var(--ember);overflow:visible}
.c-tick.is-plus{color:var(--star-faint)}
/* stroke-dasharray and stroke-dashoffset are INHERITED SVG
   properties, so setting them on the <svg> reaches the path
   inside the <symbol> that <use> instantiates */
.js .c-get .c-tick{stroke-dasharray:100;stroke-dashoffset:100}
.js .c-get.on .c-tick{stroke-dashoffset:0;transition:stroke-dashoffset .55s var(--ease-out);
  transition-delay:calc(var(--i,0) * 60ms)}
@media (prefers-reduced-motion:reduce){
  .js .c-get .c-tick{stroke-dashoffset:0;transition:none;transition-delay:0s}
}

/* --- M5 · pull quote from a real Google review ------------
   A stopping point, so it is the one module with no motion
   and no link. The rule at its left is a vertical border on a
   blockquote, not the banned horizontal dash ornament. */
.c-pull{margin:2.1rem 0;padding-left:1.1rem;border-left:2px solid rgba(255,152,24,.32);max-width:26ch}
.c-pull blockquote{font-family:var(--font-voice);font-style:italic;color:var(--amber);
  font-size:clamp(1.2rem,5vw,1.6rem);line-height:1.34;margin:0}
.c-pull figcaption{margin-top:.85rem;color:var(--star);font-weight:620;font-size:.95rem;line-height:1.4}
.c-pull figcaption span{display:block;color:var(--star-faint);font-weight:400;font-size:.85rem}

/* --- M6 · coverage, from the page's own areaServed --------
   Real places, already published in the page's Service schema
   and until now invisible to the reader. The node count comes
   from that array, so no two of the 18 towns draw the same
   shape. The list under it carries the actual text. */
.c-reach{display:grid;gap:1.5rem;justify-items:center}
@media (min-width:52rem){
  .c-reach{grid-template-columns:20rem minmax(0,1fr);align-items:center;gap:2.6rem;justify-items:start}
}
.c-reach-map{width:100%;max-width:20rem;font-family:var(--font-display)}
.c-reach-ring{fill:none;stroke:var(--line);stroke-width:1.3}
.c-reach-ring.is-inner{stroke-dasharray:3 7;opacity:.7}
.c-reach-spoke{stroke:var(--line);stroke-width:1;opacity:.6}
.c-reach-node{fill:var(--violet-glow);stroke:rgba(236,233,252,.35);stroke-width:1.2}
.c-reach-hub{fill:var(--ember)}
.c-reach-hublabel{fill:var(--star);font-size:16px;font-weight:640;letter-spacing:-.02em}
.c-reach-region{fill:var(--star-faint);font-size:13px}
.c-reach-list{margin:0}
.c-reach-list .is-hub{color:var(--star);border-color:rgba(255,152,24,.5)}
.js .c-reach .c-reach-node{opacity:0;transform:scale(.4);transform-origin:center;transform-box:fill-box}
.js .c-reach.on .c-reach-node{opacity:1;transform:none;
  transition:opacity .5s var(--ease-out),transform .6s var(--ease-out);
  transition-delay:calc(var(--i,0) * 40ms + .15s)}
.js .c-reach .c-reach-ring{stroke-dasharray:1000;stroke-dashoffset:1000}
.js .c-reach.on .c-reach-ring{stroke-dashoffset:0;transition:stroke-dashoffset .9s var(--ease-out)}
.js .c-reach .c-reach-ring.is-inner{stroke-dasharray:3 7;stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){
  .js .c-reach .c-reach-node{opacity:1;transform:none;transition:none;transition-delay:0s}
  .js .c-reach .c-reach-ring{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
  .js .c-reach .c-reach-ring.is-inner{stroke-dasharray:3 7}
}

/* --- M7 · the mechanic (niche pages) ---------------------- */
.c-mech{margin-block:1.8rem}
.c-mech h3{font-size:1.2rem;margin-bottom:.45rem}
.c-mech .voice{font-size:1.08rem;margin-bottom:.9rem}
.c-mech .c-stats{margin-block:1.3rem .2rem}
.c-mech .c-stat{padding:1rem .95rem}
.c-mech .c-stat b{font-size:1.3rem}
.c-mech .c-stat span{font-size:.9rem}
.c-mech .c-more{min-height:44px;display:inline-flex;align-items:center}

/* --- M9 · figures trio, inside the prose column ----------- */
.c-prose>.c-stats{margin-block:1.8rem}
.c-prose>.c-stats .c-stat b{font-size:1.5rem}

/* the comparison table is the one module read across, and at 390px its
   third column, the answer, starts off-screen inside the scroller */
.c-versus-hint{margin-top:-.9rem;margin-bottom:1.4rem}
@media (min-width:52rem){.c-versus-hint{display:none}}

/* ============================================================
   CORE-PAGE READABILITY (tools/corekit.py)
   /care-plan and /terms were never touched by the module kit,
   which only ever ran on the 27 registry pages, and they were
   the two worst walls on the site: 1,855px and 1,642px of
   unbroken prose at a true 390px, where a phone screen is 844.
   Everything below is drawn or typographic. No raster, no
   requests, no new fonts, about 1.4KB of markup per page.
   ============================================================ */

/* a heading that used to be a <p> wearing font-weight:800 */
.c-panel-h{font-size:clamp(1.3rem,5.2vw,1.6rem);margin:0 0 .7rem;color:var(--star)}
.c-panel h3.c-panel-h{font-size:clamp(1.15rem,4.6vw,1.35rem)}

/* --- the three routes out of the plan ---------------------
   The passage a client reads when they are working out
   whether they are trapped. Three named routes with a mark
   each, not three paragraphs running into one another. */
.c-routes-lead{color:var(--star-dim);margin-bottom:1.3rem}
.c-routes{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
/* the marker sits ABOVE the route on a phone. Beside it, a 2.9rem gutter
   costs 40 of the 317 usable pixels at 390px and drops the body to about five
   words a line, which is its own kind of unreadable. */
.c-route{padding:1.15rem 1.1rem;border:1px solid var(--line);
  border-radius:16px;background:rgba(38,22,74,.28)}
.c-route-m{display:inline-flex;align-items:center;gap:.45rem;margin-bottom:.5rem;
  color:var(--amber)}
@media (min-width:34rem){
  .c-route{display:grid;grid-template-columns:2.9rem minmax(0,1fr);gap:.9rem;
    align-items:start}
  .c-route-m{flex-direction:column;justify-content:flex-start;gap:.3rem;
    margin-bottom:0}
}
.c-route-m b{font-family:var(--font-display);font-size:.9rem;font-weight:700;
  color:var(--star-faint);line-height:1}
.c-route-i{display:block}
.c-route-b>h3{font-size:1.08rem;margin:.05rem 0 .5rem;color:var(--star)}
.c-route-b>p{margin-bottom:0}
.c-route-do{margin-top:.9rem}
.c-route-do .btn{width:100%;justify-content:center}
@media (min-width:34rem){.c-route-do .btn{width:auto}}

/* the line that says the files are yours whatever happens */
.c-keep{display:grid;grid-template-columns:1.6rem minmax(0,1fr);gap:.75rem;
  align-items:start;margin:1.4rem 0 0;color:var(--star-dim);font-size:.97rem}
.c-keep-i{color:var(--amber);margin-top:.15rem}

/* --- /terms: navigability, not interruption ---------------
   A legal document is the one place a picture in the middle of
   a clause would be worse than the wall, so this page gets a
   way IN instead: a contents list, an address on every clause,
   the clause number hanging in the gutter, and a way back. */
.c-toc{margin:1.8rem 0 2.2rem;padding:1.5rem 1.35rem;border:1px solid var(--line-bright);
  border-radius:18px;background:rgba(38,22,74,.32)}
.c-toc>h2{font-size:clamp(1.25rem,5vw,1.5rem);margin:0 0 .5rem}
.c-toc>p{color:var(--star-dim);font-size:.97rem;margin-bottom:1.1rem}
/* .c-prose ol sets list-style:decimal and an amber ::marker, and it outranks a
   bare class, so without this the contents rendered "11. 10. Failed payments":
   the browser's number beside the clause's own. */
.c-prose .c-toc-list,.c-toc-list{list-style:none;margin:0;padding:0;
  display:grid;gap:.15rem}
.c-prose .c-toc-list>li{padding-left:0}
.c-prose .c-toc-list>li::before{content:none}
@media (min-width:44rem){
  .c-prose .c-toc-list,.c-toc-list{grid-template-columns:1fr 1fr;column-gap:1.6rem}
}
.c-toc-list a{display:flex;align-items:center;min-height:44px;padding:.35rem .1rem;
  color:var(--star-dim);text-decoration:none;border-bottom:1px solid var(--line);
  font-size:.97rem;line-height:1.35}
.c-toc-list li:last-child a{border-bottom:0}
.c-toc-list a:hover,.c-toc-list a:focus-visible{color:var(--amber)}

.c-clause-h{scroll-margin-top:5.5rem}
.c-clause-t{scroll-margin-top:5.5rem;font-size:1.08rem;color:var(--star);
  margin:1.7rem 0 .45rem}
.c-clause{scroll-margin-top:5.5rem;position:relative}
.c-cn{display:inline-block;min-width:2.9rem;color:var(--star-faint);
  font-family:var(--font-display);font-variant-numeric:tabular-nums;
  font-weight:640;font-size:.92rem}
@media (min-width:52rem){
  /* on a wide screen the number leaves the text column entirely and hangs in
     the margin, so scanning down one edge finds 15.4 without reading 15.1 */
  .c-clause,.c-clause-t{padding-left:3.4rem}
  .c-cn{position:absolute;left:0;min-width:0;top:.28em}
  .c-clause-t .c-cn{top:.22em}
}
.c-clause-r{border:0;height:1px;background:var(--line);opacity:.55;
  margin:1.5rem 0 1.35rem}
@media (min-width:52rem){.c-clause-r{margin-left:3.4rem}}

.c-back{margin:1.6rem 0 0}
.c-back .btn{font-size:.92rem;padding:.6rem 1rem}
.c-back-i{width:16px;height:16px}

/* --- a disclosure set apart from the narrative around it --- */
.c-disclose{margin:1.6rem 0;padding:1.15rem 1.2rem;
  border:1px solid var(--line);border-left:2px solid rgba(240,168,50,.45);
  border-radius:14px;background:rgba(38,22,74,.26)}
.c-disclose-h{display:flex;align-items:center;gap:.6rem;margin:0 0 .7rem;
  font-size:1.02rem;color:var(--star)}
.c-disclose-i{color:var(--amber);flex:0 0 auto}
.c-disclose p{margin-bottom:0;color:var(--star-dim);font-size:.97rem}