/* Vellspan Systems site styles, v2 (2026-10-08). Colours come ONLY from tokens.css roles (see brand/BRAND.md).
   The look: forest bands on linen ground, white cards with 1px hairlines and one soft shadow, copper for the
   primary action only, sage highlighter on the key phrase. No heavy shadows, no gradients, no colored left borders. */
/* tokens.css and fonts.css are linked from the page head (parallel, not an @import chain) */

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;color-scheme:light;scroll-padding-top:var(--s7)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--fg);font:var(--fs-body)/1.6 var(--ff-text);-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:var(--tint);color:var(--brand)}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
h1,h2,h3{font-family:var(--ff-display);font-weight:600;line-height:1.1;margin:0 0 var(--s4);text-wrap:balance;letter-spacing:-.018em;color:var(--fg)}
h1{font-size:var(--fs-display);line-height:1.1}
h2{font-size:var(--fs-h2)}
h3,.h3{font-size:var(--fs-h3);line-height:1.25;letter-spacing:-.01em}
h2.h3{font-size:var(--fs-h3)}
p{margin:0 0 var(--s4);max-width:var(--measure)}
ul,ol{margin:0 0 var(--s4);padding-left:1.2rem}
li{margin-bottom:var(--s2)}
a{color:var(--brand);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--action);outline-offset:3px;border-radius:3px}
.on-brand :focus-visible{outline-color:var(--on-brand)}
/* the highlighter: painted as a short band behind the glyphs, so it never covers the line above */
mark{background:none;background-image:linear-gradient(var(--hilite),var(--hilite));background-size:100% .56em;background-position:0 calc(100% - .2em);background-repeat:no-repeat;color:var(--on-hilite);padding:0 .06em;margin:0 -.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.on-brand mark{background-image:linear-gradient(var(--hilite-on-brand),var(--hilite-on-brand));color:inherit}
.label{font:500 var(--fs-micro)/1.4 var(--ff-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--fg-3);margin:0 0 var(--s3);display:block}
.label.on{color:var(--on-brand-2)}
.lede{font-size:var(--fs-lede);line-height:1.5;color:var(--fg-2);max-width:40rem}
.small{font-size:var(--fs-small);color:var(--fg-3)}
.after{margin-top:var(--s6);font-weight:500}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--gutter);top:-4rem;background:var(--brand);color:var(--on-brand);padding:var(--s3) var(--s4);border-radius:0 0 var(--r) var(--r);z-index:9}
.skip:focus{top:0}
img{max-width:100%;height:auto;display:block}

/* header */
.top{border-bottom:1px solid var(--line);background:var(--bg);position:relative;z-index:2}
.top-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3) var(--s6);padding-block:var(--s4)}
.logo{display:inline-flex;align-items:center;gap:var(--s3);text-decoration:none;color:var(--fg)}
.logo svg{width:36px;height:36px;flex:none}
.logo b{font:600 1.4rem/1 var(--ff-display);letter-spacing:-.01em;display:block}
.logo i{font:500 .6875rem/1 var(--ff-mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);display:block;margin-top:4px}
.nav{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);align-items:center;font-weight:500;font-size:var(--fs-small)}
.nav a{color:var(--fg-2);text-decoration:none;padding:var(--s1) 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{color:var(--fg);border-bottom-color:var(--brand)}
.nav a.btn{color:var(--on-action);border-bottom:0;padding:.6rem 1.05rem}
.nav a.btn:hover{color:var(--on-action)}
@media (max-width:640px){.nav{gap:var(--s1) var(--s4);font-size:var(--fs-micro)}.nav a.btn{padding:.5rem .8rem}}
.nav-links{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);align-items:center}
.nav-toggle{font:600 var(--fs-small)/1 var(--ff-text);color:var(--fg);background:none;border:1.5px solid var(--line-strong);border-radius:var(--r);padding:.55rem .85rem;cursor:pointer}
.nav-toggle:hover{border-color:var(--brand)}
@media (max-width:760px){
.js-nav .top-in{flex-wrap:nowrap;gap:var(--s3)}
.js-nav .nav{flex-wrap:nowrap;gap:var(--s2);margin-left:auto;font-size:var(--fs-small)}
.js-nav .nav-links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:var(--s2) var(--gutter) var(--s4)}
.js-nav .nav-links.open{display:flex}
.js-nav .nav-links a{padding:var(--s3) 0;border-bottom:1px solid var(--line);font-size:1.0625rem}
.js-nav .nav-links a:last-child{border-bottom:0}
.js-nav .logo i{display:none}
}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);background:var(--action);color:var(--on-action);padding:.85rem 1.4rem;border-radius:var(--r);font-weight:600;text-decoration:none;border:0;cursor:pointer;font-family:inherit;font-size:1rem;line-height:1.2;transition:background .15s ease}
.btn:hover{background:var(--action-hi);text-decoration:none;color:var(--on-action)}
.btn.alt{background:transparent;color:var(--brand);box-shadow:inset 0 0 0 1.5px var(--brand)}
.btn.alt:hover{background:var(--tint);color:var(--brand)}
.btn.wide{width:100%;margin-top:var(--s5)}
.on-brand .btn.alt{color:var(--on-brand);box-shadow:inset 0 0 0 1.5px var(--on-brand-2)}
.on-brand .btn.alt:hover{background:var(--brand-2);color:var(--on-brand)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
.card-cta{margin:var(--s5) 0 0}

/* sections and bands */
main>section{padding-block:var(--s9) 0}
main>section.on-brand{padding-block:var(--s9)}
.page-head{padding-block:var(--s8) 0}
.page-head h1{margin-bottom:var(--s4)}
.page-head.narrow,.narrow{max-width:calc(36rem + 2*var(--gutter))}
.tight{padding-top:var(--s5)!important}
.on-brand{background:var(--brand);color:var(--on-brand)}
.on-brand.deep{background:var(--brand-deep)}
.on-brand h1,.on-brand h2,.on-brand h3,.on-brand p,.on-brand li{color:var(--on-brand)}
.on-brand .lede,.on-brand .small{color:var(--on-brand-2)}
.on-brand a:not(.btn){color:var(--on-brand)}
.on-brand .ticks li::before{border-color:var(--on-brand-2)}
.grid{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
.grid>*{min-width:0}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.two{display:grid;gap:var(--s7);grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.two.center{align-items:center}
@media (max-width:860px){.two{grid-template-columns:1fr;gap:var(--s6)}}

/* hero */
.hero{margin-top:0;padding-block:var(--s8) calc(var(--s9) + var(--s7))!important}
.hero-in{display:grid;gap:var(--s8);grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center}
.hero-copy .lede{margin-top:var(--s5)}
.hero h1{margin-bottom:0}
.hero-note{font-size:var(--fs-small);color:var(--on-brand-2);margin-top:var(--s5);max-width:34rem}
.hero-art{justify-self:end;width:100%;max-width:30rem}
@media (max-width:960px){.hero-in{grid-template-columns:1fr;gap:var(--s7)}.hero-art{justify-self:stretch;max-width:none}}
.tickrow{list-style:none;padding:0;margin:var(--s8) 0 0;display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);border-top:1px solid var(--line-on-brand);padding-top:var(--s5)}
.tickrow li{margin:0;position:relative;padding-left:1.5rem;font-weight:500;font-size:var(--fs-small);color:var(--on-brand)}
.tickrow li::before{content:"";position:absolute;left:.1rem;top:.5em;width:.75rem;height:.4rem;border-left:2px solid var(--on-brand-2);border-bottom:2px solid var(--on-brand-2);transform:rotate(-45deg)}

/* the enquiries board (hero visual) */
.board{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-lift);color:var(--fg);overflow:hidden;border:1px solid var(--line)}
.board-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);padding:var(--s4) var(--s5);font:600 1rem/1.3 var(--ff-text);border-bottom:1px solid var(--line)}
.board-note{font:500 var(--fs-small)/1.4 var(--ff-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);text-align:right}
.row{display:grid;grid-template-columns:5.2rem minmax(0,1fr) auto;gap:var(--s3);align-items:center;padding:var(--s3) var(--s5);border-bottom:1px solid var(--line);font-size:var(--fs-small);animation:rise .5s ease both;animation-delay:calc(var(--i,0)*90ms + 120ms)}
.row b{font-weight:600;color:var(--fg)}
.row span{color:var(--fg-2)}
.pill{font:500 var(--fs-micro)/1 var(--ff-mono);letter-spacing:.02em;white-space:nowrap;padding:.4rem .6rem;border-radius:99px;background:var(--tint);color:var(--brand);font-style:normal}
.pill.due{background:var(--action-soft);color:var(--action-hi)}
.board-foot{padding:var(--s4) var(--s5);font:500 var(--fs-small)/1.4 var(--ff-text);color:var(--fg-2);background:var(--bg)}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:420px){.row{grid-template-columns:1fr auto;gap:var(--s1) var(--s3)}.row span{grid-column:1/-1;font-size:var(--fs-micro)}.row .pill{justify-self:start;grid-column:1/-1}}

/* three cards overlapping the hero's bottom edge */
.lift-cards{list-style:none;padding:0;margin:calc(-1*var(--s8)) 0 0;position:relative;z-index:1;display:grid;gap:var(--s5);grid-template-columns:repeat(3,minmax(0,1fr))}
.lift-cards .card{box-shadow:var(--shadow);margin:0}
.lift-cards .num{font:500 var(--fs-small)/1 var(--ff-mono);color:var(--brand);display:block;margin-bottom:var(--s4);letter-spacing:.06em}
.lift-cards h2{font-size:var(--fs-h3);margin-bottom:var(--s2)}
.lift-cards p{margin:0;color:var(--fg-2);font-size:var(--fs-small)}
@media (max-width:860px){.lift-cards{grid-template-columns:1fr}}

/* cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6);min-width:0;box-shadow:var(--shadow)}
.card h3,.card h2.h3{margin-bottom:var(--s2)}
.card>p:last-child{margin-bottom:0}
.card.feature{border:2px solid var(--brand);position:relative}
.card .label{margin-bottom:var(--s4)}
.card .label::before{content:"";display:inline-block;width:.45rem;height:.45rem;border-radius:50%;background:var(--brand);margin-right:.5rem;vertical-align:middle}
.card.feature .label::before{background:var(--action)}
.inc p{margin:0;color:var(--fg-2);font-size:var(--fs-small)}
.plan .price{font:600 2.7rem/1 var(--ff-display);margin:var(--s2) 0 0;letter-spacing:-.02em}
.plan .price small{font:500 var(--fs-small)/1.3 var(--ff-text);color:var(--fg-3);letter-spacing:0}
.plan .price-mo{font-weight:600;color:var(--fg-2);margin:var(--s2) 0 var(--s4)}
.plan .plan-sum{color:var(--fg-2)}
.plan .terms-line{font:500 var(--fs-micro)/1.4 var(--ff-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);border-top:1px solid var(--line);padding-top:var(--s4);margin:var(--s5) 0 0}
.plans{align-items:stretch}
.ticks{list-style:none;padding:0}
.ticks li{position:relative;padding-left:1.8rem}
.ticks li::before{content:"";position:absolute;left:.1rem;top:.5em;width:.85rem;height:.45rem;border-left:2.5px solid var(--brand);border-bottom:2.5px solid var(--brand);transform:rotate(-45deg)}
.cross{list-style:none;padding:0}
.cross li{position:relative;padding-left:1.8rem;color:var(--fg-2)}
.cross li::before{content:"\00d7";position:absolute;left:.15rem;top:-.12em;font-size:1.5rem;color:var(--fg-3);line-height:1}
.cross.two-col{display:grid;gap:var(--s3) var(--s6);grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.nf ul,.promise p:last-child{margin-bottom:0}
.promise{background:var(--tint);border-color:var(--tint)}
.promise .label{color:var(--brand)}
.promise p{color:var(--fg)}

/* the 4-step strip */
.strip{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:var(--s5);grid-template-columns:repeat(4,minmax(0,1fr))}
.strip.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.strip li{counter-increment:s;margin:0;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--shadow);position:relative}
.strip li::before{content:"0" counter(s);font:500 var(--fs-small)/1 var(--ff-mono);color:var(--brand);display:block;margin-bottom:var(--s4);letter-spacing:.06em}
.strip li+li::after{content:"";position:absolute;left:calc(-1*var(--s5));top:50%;width:var(--s5);height:1px;background:var(--line-strong)}
.strip h3{font-size:1.2rem;margin-bottom:var(--s2)}
.strip p{font-size:var(--fs-small);color:var(--fg-2);margin:0}
@media (max-width:960px){.strip,.strip.three{grid-template-columns:repeat(2,minmax(0,1fr))}.strip li:nth-child(odd)::after{display:none}}
@media (max-width:560px){.strip,.strip.three{grid-template-columns:1fr}.strip li::after{display:none}}

/* the phone (text-back demo) */
.phone-wrap{margin:0;justify-self:center;width:100%;max-width:22rem}
.phone-wrap.compact{max-width:20rem}
.phone{border-radius:34px;background:var(--surface);padding:12px;box-shadow:var(--shadow-lift);border:1px solid var(--line)}
.wrap:not(.on-brand) .phone{box-shadow:var(--shadow)}
.screen{background:var(--bg);border-radius:24px;padding:var(--s5) var(--s4) var(--s4);display:grid;gap:var(--s2)}
.msg{max-width:86%;padding:.6rem .85rem;border-radius:16px;font-size:var(--fs-small);line-height:1.45;color:var(--fg)}
.msg.out{background:var(--brand);color:var(--on-brand);margin-left:auto;border-bottom-right-radius:5px}
.msg.in{background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:5px}
.on-brand .msg.out{color:var(--on-brand)}
.on-brand .msg.in{color:var(--fg)}
.stamp{font:500 var(--fs-micro)/1.3 var(--ff-mono);color:var(--fg-3);letter-spacing:.03em;text-align:center;margin:var(--s2) 0 var(--s1)}
.on-brand .stamp{color:var(--fg-3)}
.phone-wrap figcaption{font-size:var(--fs-small);color:var(--fg-3);margin-top:var(--s4);text-align:center}
.on-brand .phone-wrap figcaption{color:var(--on-brand-2)}
.demo .two{gap:var(--s8)}

/* results slot */
.results h3{max-width:34rem}
.results-head{margin-bottom:var(--s4)}
.results p{color:var(--fg-2)}
.results-table{min-width:0}
.results-table td{color:var(--fg-3);font-family:var(--ff-mono)}
.results-table th[scope="row"]{font:500 var(--fs-small)/1.4 var(--ff-text);color:var(--fg);text-transform:none;letter-spacing:0}

/* demos, people */
.demo-shot{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface);margin-bottom:var(--s5)}
.demo-shot .bar{display:flex;align-items:center;gap:6px;padding:10px 12px;background:var(--bg);border-bottom:1px solid var(--line);font:500 var(--fs-micro)/1 var(--ff-mono);color:var(--fg-3)}
.demo-shot .bar span{width:9px;height:9px;border-radius:50%;background:var(--line-strong);flex:none}
.demo-shot .bar em{font-style:normal;margin-left:var(--s3);letter-spacing:.06em;text-transform:uppercase}
.demo-shot .body{padding:0}
.portrait{margin:0;max-width:22rem;width:100%}
.portrait img{border:1px solid var(--line);border-radius:var(--r);aspect-ratio:4/5;object-fit:cover;width:100%}
.slot{border:1px solid var(--line);border-radius:var(--r);background:var(--tint);display:grid;place-items:center;aspect-ratio:4/5;width:100%}
.slot svg{width:38%;height:auto;opacity:.9}
.founder .portrait{justify-self:start}
.caption{font:500 var(--fs-micro)/1.4 var(--ff-mono);color:var(--fg-3);letter-spacing:.06em;text-transform:uppercase;margin-top:var(--s3)}
.chip{font:500 var(--fs-micro)/1.4 var(--ff-mono);background:var(--slot);color:var(--slot-ink);padding:.15rem .5rem;border-radius:4px;border:1px dashed var(--slot-ink);display:inline-block}
.note{background:var(--action-soft);color:var(--fg);padding:var(--s4) var(--s5);border-radius:var(--r);border:1px solid var(--action-soft);white-space:pre-wrap}
.note p{margin-bottom:0}
.out{margin-top:var(--s5)}
.out .small{margin-top:var(--s4)}
.quiet{display:grid;gap:var(--s5) var(--s6);grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.quiet>div{border-top:1px solid var(--line-strong);padding-top:var(--s4);min-width:0}
.quiet h3{font:700 1.05rem/1.3 var(--ff-text);margin-bottom:var(--s2);letter-spacing:0}
.quiet p{margin:0;font-size:var(--fs-small);color:var(--fg-2)}
.loop-art{max-width:30rem;width:100%;justify-self:center}
.loop-art svg{width:100%;height:auto;display:block}
.legend{counter-reset:l;list-style:none;padding:0;margin:var(--s4) 0 0;display:grid;gap:var(--s2);font-size:var(--fs-small);color:var(--fg-2)}
.legend li{counter-increment:l;margin:0;display:flex;gap:var(--s3);align-items:baseline}
.legend li::before{content:counter(l);font:500 var(--fs-micro)/1 var(--ff-mono);color:var(--on-brand);background:var(--brand);border-radius:50%;width:1.35rem;height:1.35rem;display:inline-grid;place-items:center;flex:none;transform:translateY(-1px)}
.table-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
table{border-collapse:collapse;width:100%;min-width:34rem;font-size:var(--fs-small)}
th,td{text-align:left;padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);vertical-align:top}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
th{font:500 var(--fs-micro)/1.3 var(--ff-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--fg-3)}
td:nth-child(2),td:nth-child(3){white-space:nowrap;font-weight:600;color:var(--brand)}

/* forms, faq */
label{display:block;font-weight:600;margin:var(--s4) 0 var(--s1)}
label .opt{font:500 var(--fs-micro)/1 var(--ff-mono);color:var(--fg-3);letter-spacing:.06em;text-transform:uppercase;margin-left:var(--s2)}
input,select,textarea{width:100%;padding:.75rem .8rem;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);color:var(--fg);font:inherit}
input:focus,select:focus{border-color:var(--brand)}
.err{color:var(--error);min-height:1.3em;margin:var(--s2) 0 0;font-size:var(--fs-small)}
form .btn{margin-top:var(--s4)}
form .small{margin-top:var(--s4)}
.book .card>.btn-row{margin-top:var(--s4)}
.faq{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:0 var(--s6)}
details{border-bottom:1px solid var(--line);padding:var(--s4) 0}
details:last-child{border-bottom:0}
summary{cursor:pointer;font-weight:600;font-size:1.125rem;list-style:none;position:relative;padding-right:2rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:0;top:0;font:500 1.4rem/1.2 var(--ff-mono);color:var(--brand)}
details[open] summary::after{content:"\2013"}
details p{margin:var(--s3) 0 0;color:var(--fg-2)}
.faq.big summary{font-size:1.2rem}

/* cta band + footer */
.cta{text-align:left}
.cta .btn-row{margin-top:var(--s5)}
.cta .btn{background:var(--action)}
.sig{font:500 var(--fs-micro)/1.4 var(--ff-mono);letter-spacing:.06em;text-transform:uppercase;margin-top:var(--s6)}
.on-brand .sig{color:var(--on-brand-2)}
.foot{margin-top:0;background:var(--brand-deep);color:var(--on-brand-2);font-size:var(--fs-small)}
.cta+.foot{border-top:1px solid var(--line-on-brand)}
.foot-in{display:grid;gap:var(--s6);grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));padding-block:var(--s8) var(--s6)}
.foot-brand .logo,.foot-brand .logo b{color:var(--on-brand)}
.foot-brand .logo i{color:var(--on-brand-2)}
.foot-brand .loop-ring,.foot-brand .loop-dot{stroke:var(--on-brand);fill:var(--on-brand)}
.foot-brand .loop-ring{fill:none}
.foot-brand p{margin-top:var(--s4);color:var(--on-brand)}
.foot-brand .foot-small{color:var(--on-brand-2);font-size:var(--fs-micro)}
.foot a{color:var(--on-brand)}
.foot h2{font:500 var(--fs-micro)/1 var(--ff-mono);text-transform:uppercase;letter-spacing:.09em;color:var(--on-brand-2);margin-bottom:var(--s3)}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:var(--s2)}
.foot p{margin:0 0 var(--s3);color:var(--on-brand)}
.foot-line{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s2) var(--s5);border-top:1px solid var(--line-on-brand);padding-block:var(--s4);font-size:var(--fs-micro);color:var(--on-brand-2)}

/* loop art */
.loop-ring{stroke:var(--brand);fill:none;stroke-width:5}
.loop-mend{stroke:var(--action);fill:none;stroke-width:5;stroke-linecap:round}
.loop-dot{fill:var(--brand)}
.node{fill:var(--bg);stroke:var(--brand);stroke-width:3}
.node-on{fill:var(--brand)}
.num{font:500 15px/1 var(--ff-mono);fill:var(--on-brand);text-anchor:middle;dominant-baseline:central}
.lbl-sm{font:500 11px/1 var(--ff-mono);fill:var(--fg-3);letter-spacing:.08em;text-transform:uppercase;text-anchor:middle}
.pulse{animation:pulse 3s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ======================================================================================================================
   2026-10-22 retouch (Sean: "I like our green with the cream"). Forest bands alternate with white sheets that sit on the
   cream; the cream carries four trade photos at about 5% (img/service-ground.webp, credited in the footer). Bands
   re-scope the colour roles instead of overriding text colours, so a white card inside a band reads exactly like one
   on the cream. The Loop ring turns slowly behind every forest band. Parts of each section rise in once (motion.js).
   ==================================================================================================================== */
body{position:relative;isolation:isolate;background:var(--bg)}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:url("img/service-ground.webp") center/cover no-repeat;opacity:.055;mix-blend-mode:multiply}
@media (max-width:760px){body::before{background-size:auto 100%;opacity:.06}}

/* header: stays with you, settles a shadow once you scroll */
.top{position:sticky;top:0;z-index:5;background:var(--bg);transition:box-shadow .25s ease,border-color .25s ease}
.top.scrolled{box-shadow:0 1px 0 var(--line),0 8px 24px rgba(21,32,28,.07);border-bottom-color:transparent}

/* forest bands: the roles flip, cards inside flip back */
.band-g,.hero,.demo,.cta{position:relative;overflow:hidden}
.band-g{background:var(--c-forest);padding-block:calc(var(--s9) + var(--s4));
  --fg:var(--c-chalk);--fg-2:var(--c-chalk-2);--fg-3:var(--c-chalk-2);--brand:var(--c-chalk);--brand-2:var(--c-forest-2);
  --line:var(--c-line-forest);--line-strong:var(--c-line-forest);--hilite:var(--c-forest-2);--on-hilite:var(--c-chalk);color:var(--fg)}
.band-g :is(.card,.faq,.table-wrap,.phone,.board,.strip li,.note){
  --fg:var(--c-ink);--fg-2:var(--c-ink-2);--fg-3:var(--c-ink-3);--brand:var(--c-forest);--brand-2:var(--c-forest-2);
  --line:var(--c-line);--line-strong:var(--c-line-2);--hilite:var(--c-sage);--on-hilite:var(--c-ink);color:var(--fg)}
.band-g .slot{background:var(--c-forest-2);border-color:var(--c-line-forest)}
.band-g .promise{--fg:var(--c-ink);--brand:var(--c-forest);background:var(--tint);color:var(--fg)}
.band-g .btn.alt:hover{background:var(--c-forest-2);color:var(--c-chalk)}
.band-g .card :is(.btn.alt):hover{background:var(--tint);color:var(--c-forest)}
.band-g .card.feature{border-color:var(--action);box-shadow:0 0 0 4px rgba(169,75,28,.18),var(--shadow-lift)}
.band-g .card,.band-g .faq,.band-g .table-wrap,.band-g .strip li{box-shadow:var(--shadow-lift);border-color:transparent}
.band-g .quiet>div{border-top-color:var(--c-line-forest)}
.band-g .cross li::before{color:var(--c-chalk-2)}
.band-g.page-head{padding-block:var(--s9) calc(var(--s9) - var(--s2))}
.band-g.page-head h1{color:var(--c-chalk);max-width:22ch}
.band-g.page-head .lede{color:var(--c-chalk-2)}
.band-g>.wrap,.hero>.wrap,.demo>.wrap,.cta>.wrap{position:relative;z-index:1}
.band-g + .cta{margin-top:var(--s6)}

/* the Loop, large and quiet, behind every forest band */
.band-ring{position:absolute;z-index:0;pointer-events:none;width:min(46rem,90vw);aspect-ratio:1;right:-12rem;top:50%;translate:0 -50%;animation:ring-turn 90s linear infinite}
.band-ring .loop-ring{stroke:var(--c-chalk);stroke-width:1.1;opacity:.075}
.band-ring .loop-mend{stroke:var(--action);stroke-width:1.1;opacity:.6}
.band-g:nth-of-type(4n+1) .band-ring,.demo .band-ring{right:auto;left:-14rem}
.hero .band-ring{width:min(58rem,110vw);right:-16rem;top:42%}
.cta .band-ring{width:min(40rem,80vw);right:-8rem}
@keyframes ring-turn{to{rotate:360deg}}
@media (max-width:760px){.band-ring{width:34rem;right:-18rem}.band-g:nth-of-type(4n+1) .band-ring,.demo .band-ring{left:-20rem}}

/* white sheets on the cream */
.band-w{padding-block:var(--s8)}
.band-w+.band-w{padding-top:0}
.sheet{background:var(--c-white);border-radius:28px;padding:clamp(28px,5.2vw,80px);box-shadow:0 1px 2px rgba(21,32,28,.05),0 24px 64px -12px rgba(21,32,28,.16);
  --surface:var(--c-linen);--line:var(--c-line);position:relative}
.sheet::before{content:"";position:absolute;left:clamp(28px,5.2vw,80px);top:0;width:56px;height:4px;border-radius:0 0 4px 4px;background:var(--action)}
.sheet .card,.sheet .strip li,.sheet .faq,.sheet .table-wrap{box-shadow:none;border-color:transparent}
.sheet .card.feature{border-color:var(--brand);background:var(--c-white);box-shadow:0 0 0 4px var(--tint)}
.sheet .promise{background:var(--tint)}
.sheet .phone{box-shadow:var(--shadow-lift)}
.sheet>:last-child{margin-bottom:0}
.sheet-split{margin-top:var(--s9)}
.lift-cards+.band-w,.wrap:has(.lift-cards)+.band-w{padding-top:var(--s8)}

/* bigger, livelier type in the sections */
main h2{font-size:clamp(2rem,1.3rem + 2.4vw,3.3rem);line-height:1.06;letter-spacing:-.022em;max-width:24ch}
.label{display:flex;align-items:center;gap:.7rem}
.label::before{content:"";width:28px;height:2px;border-radius:2px;background:var(--action);flex:none}
.card .label::before,.label.on::before{width:28px;height:2px;border-radius:2px;margin:0;background:var(--action)}
.card .label{display:flex}
.hero .label.on::before{background:var(--action)}

/* the three cards that sit on the hero's edge: copper numerals, a lift on hover */
.lift-cards .num{font:600 2.4rem/1 var(--ff-display);color:var(--action);letter-spacing:-.02em;margin-bottom:var(--s3)}
.lift-cards .card{border:0;box-shadow:0 2px 4px rgba(10,58,48,.08),0 22px 48px -10px rgba(10,58,48,.25)}
.strip li::before{font:600 1.9rem/1 var(--ff-display);color:var(--action);letter-spacing:-.02em}

/* hover life on cards and buttons */
.card,.strip li,.lift-cards .card{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
@media (hover:hover){
.card:hover,.strip li:hover{transform:translateY(-4px)}
.sheet .card:hover,.sheet .strip li:hover{box-shadow:0 18px 40px -16px rgba(21,32,28,.22)}
}
.btn{transition:background .15s ease,transform .2s ease,box-shadow .2s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px -8px rgba(142,62,22,.55)}
.btn.alt:hover{box-shadow:none}
.btn:active{transform:translateY(0)}

/* hero: the tick row becomes chips; the board floats */
.tickrow{border-top:0;gap:var(--s3)}
.tickrow li{background:var(--brand-2);border-radius:99px;padding:.55rem 1rem .55rem 2.1rem}
.tickrow li::before{left:.95rem;top:.95em}
.hero .board{animation:board-float 7s ease-in-out infinite}
@keyframes board-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* entrances: only when motion.js runs and motion is welcome */
.js-rv .rv{opacity:0;transform:translateY(24px);transition:opacity .75s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .75s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.js-rv .rv.in{opacity:1;transform:none}
.js-rv .rv.in.card:hover,.js-rv .strip li.rv.in:hover{transform:translateY(-4px)}

/* footer credit */
.foot-credit p{max-width:none;margin:0;padding-block:0 var(--s5);font-size:.75rem;line-height:1.5;color:var(--on-brand-2)}
.foot-credit a{color:var(--on-brand-2)}
@media (min-width:761px){.nav-toggle{display:none}}
@media (max-width:640px){
.band-w>.wrap{padding-inline:12px}
.sheet{border-radius:22px;padding:28px 20px 32px}
.sheet::before{left:20px}
.band-w{padding-block:var(--s6)}
.band-g{padding-block:var(--s8)}
.band-ring .loop-mend{opacity:.35}
}

/* review fixes, 2026-10-22 (REVIEW.md): ring out of the text column, chalk focus on forest, more cream showing,
   copper back to meaning "action", sticky-header-safe anchors */
html{scroll-padding-top:88px}
.band-g .band-ring,.demo .band-ring,.cta .band-ring,.band-g:nth-of-type(4n+1) .band-ring{left:calc(50% + var(--max)/2 - 5rem);right:auto;width:40rem}
.band-ring .loop-mend{opacity:.3}
@media (max-width:1100px){.band-g .band-ring,.demo .band-ring,.cta .band-ring{display:none}}
@media (max-width:760px){.hero .band-ring{display:none}}
.band-g :focus-visible,.hero :focus-visible,.demo :focus-visible,.cta :focus-visible{outline-color:var(--c-chalk)}
.band-g :is(.card,.faq,.table-wrap,.phone,.board) :focus-visible{outline-color:var(--action)}
.band-w>.wrap{max-width:calc(1040px + 2*var(--gutter))}
.sheet::before{content:none}
.label::before,.card .label::before,.label.on::before,.hero .label.on::before{background:currentColor;opacity:.55}
@media (max-width:640px){.band-w>.wrap{padding-inline:20px}.sheet{padding:26px 18px 30px}}

/* 2026-10-22 copy rewrite: real CRM shots, the tour, the status table */
.hero-in{grid-template-columns:1fr;gap:var(--s7)}
.hero-copy{max-width:46rem}
.hero-art{max-width:64rem;justify-self:center}
.shot{margin:0;box-shadow:var(--shadow-lift)}
.shot img{display:block;width:100%;height:auto}
.shot-note{font-size:var(--fs-micro);color:var(--on-brand-2);margin:var(--s3) 0 0}
.tour{display:grid;gap:var(--s8);margin-top:var(--s6)}
.tour-row{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:var(--s7);align-items:center}
.tour-row.flip{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
.tour-row.flip .tour-copy{order:2}
.tour-copy h3{font:600 var(--fs-h3)/1.2 var(--ff-display);margin:var(--s2) 0 var(--s3)}
.tour-copy p{color:var(--fg-2)}
.tour .shot{margin-bottom:0;box-shadow:var(--shadow)}
@media (max-width:860px){.tour-row,.tour-row.flip{grid-template-columns:1fr;gap:var(--s5)}.tour-row.flip .tour-copy{order:0}}
.status{width:100%;border-collapse:collapse;font-size:var(--fs-small)}
.status th,.status td{text-align:left;vertical-align:top;padding:var(--s3) var(--s4);border-bottom:1px solid var(--line)}
.status thead th{font:500 var(--fs-micro)/1.2 var(--ff-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3)}
.status tbody th{font-weight:600;width:42%}
.status-card .status{background:var(--surface);color:var(--fg);border-radius:var(--r-lg);overflow:hidden}
.status-card .table-wrap{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lift)}

.status{table-layout:fixed;min-width:0}
.status th,.status td{white-space:normal;overflow-wrap:anywhere}
.status-card{min-width:0}
.scroll-hint{display:none;color:var(--fg-3)}
@media (max-width:760px){.scroll-hint{display:block}.status tbody th{width:38%}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.check{display:flex;gap:.6rem;align-items:flex-start;margin:.75rem 0}
.check input{margin-top:.25rem;flex:none;width:auto}
.check label{display:inline;margin:0;font-weight:400}