/* Homepage v4 (teal rebrand, 30 Oct 2026): Creation hero, BISMO CRM demo, price cards, myth gallery. */
:root{--cream:#F2E9D6;--cream-2:#F7F1E5;--teal:#8A6514;--teal-50:#F8F1E0;--teal-100:#F0E3C3;--teal-200:#E3CF9F;--teal-300:#CDB27A;--teal-400:#B08A3A;--teal-700:#93380B;--teal-900:#2A1F0A}

/* Hero: short, cream, the Creation arms with ink studies behind. */
.intro--creation{position:relative;background:var(--cream);padding-block:clamp(1.25rem,3vw,2.25rem) clamp(2rem,4vw,3rem);overflow:hidden}
.intro--creation::after{content:"";position:absolute;inset:auto 0 0;height:clamp(2rem,4vw,3rem);background:linear-gradient(to bottom,transparent,var(--paper));z-index:4;pointer-events:none}
.creation{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.creation__h{position:relative;z-index:3;margin:0 0 clamp(.75rem,2vw,1.75rem);color:#0b0b0b;font-size:clamp(2.1rem,4.7vw,4.3rem);line-height:1.02;letter-spacing:-.03em;text-shadow:0 0 18px var(--cream),0 0 6px var(--cream),0 0 2px var(--cream)}
.creation__h span{display:block}
.creation__art{position:relative;width:100vw;aspect-ratio:1216 / 410;max-height:64vh;isolation:isolate}
.creation__img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 62%;z-index:1}
/* The two hands fade in apart and drift together once, slowly, then rest a breath short of touching. */
.creation__img--l{transform-origin:0 85%;animation:reachL 6.5s cubic-bezier(.45,.05,.12,1) .4s both}
.creation__img--r{transform-origin:100% 25%;animation:reachR 6.5s cubic-bezier(.45,.05,.12,1) .4s both}
@keyframes reachL{0%{opacity:.08;transform:translate(-4.5%,1.6%) rotate(1.3deg)}18%{opacity:1}100%{opacity:1;transform:none}}
@keyframes reachR{0%{opacity:.08;transform:translate(4.5%,-1.3%) rotate(-1deg)}18%{opacity:1}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.creation__img--l,.creation__img--r{animation:none}}
/* 1 Nov 2026 (Jack, "Ink From Touch"): home-v4.js plays an ink clip that blooms from the fingertips and ends on this art, then the art fades back in.
   The clip's paper is a shade lighter than the cream, so darken against the cream background leaves only the ink.
   The art stays painted at 1% under the clip (about 2/255 on the ink lines, invisible) so LCP counts it when it loads, not when the clip ends; at 0 LCP moved from ~1.5 s to ~8 s. */
.creation__ink{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 62%;z-index:2;opacity:0;pointer-events:none;mix-blend-mode:darken}
.creation__art.is-ink{background:var(--cream)}
.is-ink .creation__img{animation:none;opacity:.01;transition:opacity .5s ease}
.is-ink .creation__ink{opacity:1}
.is-ink-done .creation__img{opacity:1}
.is-ink-done .creation__ink{opacity:0;transition:opacity .5s ease}
.creation__cta{position:absolute;left:50%;bottom:clamp(1.25rem,3vw,2.5rem);translate:-50% 0;z-index:5}
.creation__cta .btn{width:auto;white-space:nowrap}
@media (max-width:760px){
  .creation__h{margin-bottom:.5rem}
  .creation__art{width:170vw;max-height:none}
  .creation__cta{position:relative;left:auto;bottom:auto;translate:none;margin-top:.5rem;align-self:center;display:inline-flex;width:auto;justify-content:center}
}

/* Founders: the award badge sits under the lede, level with the photos. */
.founders__grid{align-items:stretch}
.founders__text{display:flex;flex-direction:column;justify-content:center}
.founders__text .nomination-badge{margin-top:clamp(1.5rem,3vw,2.25rem);background:var(--cream)}

/* Pillars: equal height, same rhythm, lift on hover. */
.pillars{align-items:stretch}
.pillars .pillar{display:flex;flex-direction:column;overflow:hidden}
.pillars .pillar__visual{transition:transform .6s var(--ease)}
.pillars .pillar:hover .pillar__visual,.pillars .pillar:focus-visible .pillar__visual{transform:scale(1.04)}
.pillars .pillar p{min-height:3.2em}
.pillars .pillar ul{margin-bottom:1.25rem}
.pillars .card__more{margin-top:auto}
.pillars .pillar:hover{border-color:var(--teal-300);box-shadow:0 18px 40px -24px rgba(42,31,10,.45)}

/* Price cards */
.prices .plan{transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.prices .plan:hover{transform:translateY(-4px);border-color:var(--teal-300);box-shadow:0 18px 40px -24px rgba(42,31,10,.45)}
.prices .plan__price small{font-family:var(--font-body,inherit);font-size:.9rem;letter-spacing:0;color:var(--ink-3);margin-right:.2rem}
.prices .plan__price small:last-child{margin:0 0 0 .1rem}
.prices .plan__terms{min-height:2.6em}
.prices .card__more{margin-top:auto}

/* BISMO CRM demo: a near-black frame, 4px corners, neutral tags with no colour stripes, nine clickable pages
   with their agents at work, and three button styles picked under the demo. Motion is transform and opacity only,
   nothing plays off screen, and all of it stops under reduced motion. */
.crm-section{--g-ink:#0E0D0C;--g-ink-2:#221F1B;--g-soft:#56504A;--g-faint:#6A635A;--g-edge:#E6E5E3;--g-edge-2:#D3D0CD;--g-fill:#F5F5F4;--g-fill-2:#EDECEB;--g-teal:#8A6514;--g-teal-2:#6E500F;--g-teal-l:#D9B76A;--g-ease:cubic-bezier(.22,1,.36,1);--mono:var(--font-body);--rail:68px;--r:4px}
.crm-stage{position:relative}
.crm{position:relative;border-radius:8px;overflow:hidden;text-align:left;color:var(--g-ink);background:#fff;border:1px solid var(--g-ink);box-shadow:0 1px 2px rgba(14,13,12,.08),0 30px 60px -36px rgba(14,13,12,.45)}
.crm button{font:inherit;color:inherit}
.crm__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px) minmax(0,1fr);align-items:center;gap:1rem;padding:.7rem 1.1rem .7rem 0;background:var(--g-ink);color:#fff;font-size:.82rem;border-bottom:1px solid var(--g-ink-2)}
.crm__brand{display:flex;align-items:center;gap:calc(var(--rail) - 31px);min-width:0}
.crm__logo{flex:none;width:30px;height:30px;margin-left:19px;border-radius:var(--r);display:grid;place-items:center;font-weight:800;font-size:.82rem;color:var(--g-ink);background:#fff}
.crm__brand b{letter-spacing:.14em;font-size:.76rem;color:#fff}
.crm__crumb{color:rgba(255,255,255,.5);white-space:nowrap}
.crm__crumb>span[aria-hidden]{margin-inline:.25rem}
.crm__crumb [data-crm-crumb]{color:#fff}
.crm__cmd{display:flex;align-items:center;gap:.5rem;padding:.42rem .7rem;border-radius:var(--r);background:var(--g-ink-2);border:1px solid #332F2A;color:rgba(255,255,255,.5)}
.crm__cmd kbd{margin-left:auto;font:600 .66rem var(--mono);padding:.1rem .35rem;border-radius:3px;background:transparent;border:1px solid #443F3A;color:rgba(255,255,255,.6)}
.crm__status{justify-self:end;display:block;width:15.5rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;padding:.25rem .6rem;border-radius:var(--r);border:1px solid #332F2A;color:rgba(255,255,255,.7);font-size:.74rem;font-weight:500;white-space:nowrap;transition:color .3s,background-color .3s,border-color .3s}
.crm__status::before{content:"";display:inline-block;vertical-align:middle;margin:-2px .45rem 0 0;width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35)}
.crm[data-busy] .crm__status{color:#fff;border-color:var(--g-teal);background:var(--g-teal)}
.crm[data-busy] .crm__status::before{background:#fff}
.crm__frame{display:grid;grid-template-columns:var(--rail) minmax(0,1fr) 300px;min-height:580px}
.crm__rail{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.9rem 0;background:var(--g-ink);border-right:1px solid var(--g-ink-2)}
.crm__rail button{position:relative;flex:none;width:40px;height:40px;border:0;border-radius:var(--r);background:none;display:grid;place-items:center;color:rgba(255,255,255,.5)!important;font-size:1.15rem;cursor:pointer;transition:color .2s,background-color .2s}
.crm__rail button:hover{color:#fff!important;background:var(--g-ink-2)}
.crm__rail button[aria-current]{color:#fff!important;background:#282521}
.crm__rail button[aria-current]::before{content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:2px;background:var(--g-teal-l)}
.crm__rail button:focus-visible{outline:2px solid var(--g-teal-l);outline-offset:1px}
.crm__rail span{position:absolute;left:calc(100% + 10px);top:50%;z-index:5;transform:translate(-4px,-50%);padding:.3rem .5rem;border-radius:3px;background:var(--g-ink);color:#fff;font-size:.72rem;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.crm__rail button:hover span,.crm__rail button:focus-visible span{opacity:1;transform:translate(0,-50%)}
.crm__rail hr{width:24px;border:0;border-top:1px solid #332F2A;margin:.35rem 0}
.crm__main{padding:1.1rem 1.2rem 1.2rem;min-width:0;display:flex;flex-direction:column;gap:1rem}
.crm__main.is-fresh .crm__pane:not([hidden]){animation:crmFade .4s var(--g-ease)}
.crm__pane{display:flex;flex-direction:column;gap:1rem;flex:1;min-height:0}
.crm__pane[hidden],.crm [data-pipe-only][hidden]{display:none}
.crm__toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;min-height:40px}
.crm__title h3{margin:0;font-size:1.3rem;color:var(--g-ink);letter-spacing:-.02em}
.crm__title span{font-size:.74rem;color:var(--g-faint)}
.crm__actions{display:flex;gap:.5rem}

/* Buttons. Studio (default): square-cut, black primary that turns teal on hover, a 1px press. */
.crm__btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:38px;padding:.5rem .9rem;border-radius:var(--r);border:1px solid var(--g-edge-2);background:#fff;color:var(--g-ink)!important;cursor:pointer;font-size:.82rem!important;font-weight:600!important;line-height:1.1;transition:background-color .2s,border-color .2s,color .2s,box-shadow .25s,transform .2s var(--g-ease),background-size .35s var(--g-ease)}
.crm__btn:hover{border-color:var(--g-ink)}
.crm__btn:active{transform:translateY(1px)}
.crm__btn:focus-visible,.agent:focus-visible{outline:2px solid var(--g-ink);outline-offset:2px}
.crm__btn--primary{background-color:var(--g-ink);border-color:var(--g-ink);color:#fff!important}
.crm__btn--primary:hover{background-color:var(--g-teal);border-color:var(--g-teal)}
.crm__btn--sm{min-height:30px;padding:.35rem .7rem;font-size:.74rem!important}
.crm__play{width:12px;height:12px;fill:currentColor}
/* Pill: fully round, teal primary, lifts on a spring. */
.crm[data-btn="pill"] .crm__btn{border-radius:999px;padding-inline:1.1rem;transition:transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .3s,background-color .2s,border-color .2s}
.crm[data-btn="pill"] .crm__btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px -12px rgba(14,13,12,.5);border-color:var(--g-edge-2)}
.crm[data-btn="pill"] .crm__btn:active{transform:scale(.96)}
.crm[data-btn="pill"] .crm__btn--primary{background-color:var(--g-teal);border-color:var(--g-teal)}
.crm[data-btn="pill"] .crm__btn--primary:hover{background-color:var(--g-teal-2);border-color:var(--g-teal-2)}
/* Line: no radius, outlined capitals, a fill that sweeps in from the left. */
.crm[data-btn="line"] .crm__btn{border-radius:0;border:1.5px solid var(--g-ink);background:linear-gradient(var(--g-ink),var(--g-ink)) no-repeat left/0% 100%;background-color:transparent;text-transform:uppercase;letter-spacing:.09em;font-size:.7rem!important}
.crm[data-btn="line"] .crm__btn:hover{background-size:100% 100%;color:#fff!important}
.crm[data-btn="line"] .crm__btn:active{transform:none;opacity:.85}
.crm[data-btn="line"] .crm__btn--primary{border-color:var(--g-teal);color:var(--g-teal)!important;background-image:linear-gradient(var(--g-teal),var(--g-teal))}
.crm[data-btn="line"] .crm__btn--primary:hover{color:#fff!important}

.crm__kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;border:1px solid var(--g-edge);border-radius:var(--r)}
.crm__kpis div{padding:.7rem .9rem;min-width:0}
.crm__kpis div+div{border-left:1px solid var(--g-edge)}
.crm__kpis dt{font-size:.64rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--g-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crm__kpis dd{margin:.3rem 0 0;font:650 1.3rem/1.15 var(--mono);color:var(--g-ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crm__kpis dd.is-bump{animation:crmBump .5s var(--g-ease)}
@keyframes crmBump{40%{transform:translateY(-3px)}}
@keyframes crmFade{from{opacity:.2}}
.crm__board{flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem;min-height:0}
.crm__col{display:flex;flex-direction:column;border-radius:var(--r);background:var(--g-fill);padding:.55rem;min-width:0;transition:background-color .25s,box-shadow .25s}
.crm__col.is-over{background:var(--g-fill-2);box-shadow:inset 0 0 0 1.5px var(--g-ink)}
.crm__col header{display:flex;align-items:center;justify-content:space-between;gap:.4rem;margin-bottom:.55rem;padding:.1rem .15rem;font-size:.76rem}
.crm__stage{display:flex;align-items:baseline;gap:.45rem;font-weight:650;color:var(--g-ink)}
.crm__stage em{font:500 .64rem var(--mono);font-style:normal;color:var(--g-faint)}
.crm__colmeta{display:flex;align-items:center;gap:.4rem;font:500 .72rem var(--mono);color:var(--g-faint)}
.crm__colmeta b{min-width:1.4rem;text-align:center;padding:.05rem .35rem;border-radius:2px;background:#fff;border:1px solid var(--g-edge);color:var(--g-soft);font-weight:600}
.crm__cards{list-style:none;margin:0;padding:0;display:grid;gap:.45rem;align-content:start}
.lead{position:relative;display:grid;gap:.2rem;padding:.6rem .65rem;border-radius:3px;font-size:.78rem;background:#fff;border:1px solid var(--g-edge);cursor:pointer;user-select:none;transition:border-color .2s,box-shadow .2s,opacity .3s,transform .25s var(--g-ease)}
.lead:hover{border-color:#A49F9A;transform:translateY(-1px)}
.lead:focus-visible{outline:2px solid var(--g-ink);outline-offset:2px}
.lead.is-sel{border-color:var(--g-ink);box-shadow:0 0 0 1px var(--g-ink)}
.lead.is-drag{opacity:.4}
.lead[data-lock]{cursor:progress}
.lead.is-new{animation:crmEnter .6s var(--g-ease) both}
@keyframes crmEnter{from{opacity:0;transform:translateY(-10px) scale(.97)}to{opacity:1;transform:none}}
.lead__row{display:flex;justify-content:space-between;align-items:baseline;gap:.4rem}
.lead__name{font-size:.84rem;color:var(--g-ink)}
.lead__id{font:500 .66rem var(--mono);color:var(--g-faint)}
.lead__job{color:var(--g-soft);line-height:1.3}
.lead__foot{display:flex;justify-content:space-between;align-items:center;gap:.4rem;margin-top:.35rem}
.lead__val{font:650 .78rem var(--mono);color:var(--g-ink);font-variant-numeric:tabular-nums}
.tag{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:.66rem;font-weight:600;line-height:1.55;color:var(--g-soft);background:#fff;border:1px solid var(--g-edge-2);border-radius:2px;padding:0 .4rem;white-space:nowrap;transition:color .3s,background-color .3s,border-color .3s,opacity .3s}
.tag.is-done{background:var(--g-ink);border-color:var(--g-ink);color:#fff}
.tag.is-wait{border-style:dashed;border-color:var(--g-soft);color:var(--g-ink)}
.lead.is-asking{border-color:var(--g-ink);background:var(--g-fill)}
.lead__ask{display:grid;gap:.45rem;margin-top:.5rem;padding-top:.55rem;border-top:1px dashed var(--g-edge-2);animation:crmEnter .45s var(--g-ease) both}
.lead__ask p{margin:0;font-size:.72rem;color:var(--g-ink);line-height:1.35}

/* Other pages: one table style, a reviews header, a report and the agent org chart. */
.crm__list{border:1px solid var(--g-edge);border-radius:var(--r);overflow:hidden}
.crm__list ul{list-style:none;margin:0;padding:0}
.crm__lh,.row{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,.6fr);gap:.75rem;align-items:center;padding:.6rem .85rem}
.crm__lh{padding-block:.45rem;background:var(--g-fill);font-size:.64rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--g-faint)}
.crm__lh span:last-child,.row__val{text-align:right}
.row{border-top:1px solid var(--g-edge);font-size:.78rem}
.row.is-hi{animation:crmRow 1.4s var(--g-ease)}
@keyframes crmRow{0%{background:var(--g-fill-2);transform:translateY(-4px);opacity:.3}30%{transform:none;opacity:1}100%{background:#fff}}
.row__main{min-width:0;display:grid}
.row__main b{font-size:.82rem;color:var(--g-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row__main small,.row__mid{font-size:.74rem;color:var(--g-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row__st{min-width:0}
.row__val{font:650 .78rem var(--mono);color:var(--g-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.rev{display:flex;align-items:baseline;flex-wrap:wrap;gap:.75rem}
.rev b{font:600 2.1rem/1 var(--font-display);color:var(--g-ink)}
.rev span{letter-spacing:.15em;color:var(--g-ink)}
.rev small{font-size:.74rem;color:var(--g-faint)}
.rep{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:.8rem}
.rep__box{border:1px solid var(--g-edge);border-radius:var(--r);padding:.85rem .95rem;min-width:0}
.rep__cap{margin:0 0 .8rem;font-size:.64rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--g-faint)}
.rep__bars{display:grid;grid-template-columns:repeat(7,1fr);gap:.4rem;height:170px}
.rep__bars span{display:grid;grid-template-rows:1fr auto;gap:.35rem;text-align:center;min-height:0}
.rep__bars i{align-self:end;height:var(--h);background:var(--g-ink);border-radius:2px 2px 0 0;transform-origin:bottom}
.rep.is-grow .rep__bars i{animation:crmGrow .8s var(--g-ease) both}
@keyframes crmGrow{from{transform:scaleY(0)}}
.rep__bars em{font:500 .62rem var(--mono);font-style:normal;color:var(--g-faint)}
.rep__doc{margin:0;padding:0 0 0 1.1rem;display:grid;gap:.5rem;font-size:.8rem;line-height:1.45;color:var(--g-ink)}
.rep__doc li.is-hi{animation:crmLine .5s var(--g-ease) both}
.ag-card{position:relative;display:flex;align-items:center;gap:.7rem;padding:.7rem .75rem;border:1px solid var(--g-edge);border-radius:var(--r);background:#fff;overflow:hidden;transition:border-color .25s}
.ag-card.is-working{border-color:var(--g-ink)}
.ag__ic{flex:none;width:34px;height:34px;border-radius:var(--r);display:grid;place-items:center;font-size:1rem;color:var(--g-ink);background:var(--g-fill);transition:background-color .25s,color .25s}
.ag-card.is-working .ag__ic{background:var(--g-ink);color:#fff}
.ag__txt{flex:1;min-width:0;display:grid}
.ag__txt b{font-size:.8rem;line-height:1.25;color:var(--g-ink)}
.ag__txt small{font-size:.7rem;line-height:1.3;color:var(--g-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag__st{flex:none;display:inline-flex;align-items:center;gap:.3rem;font-size:.6rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--g-faint)}
.ag__st i{width:6px;height:6px;border-radius:50%;background:var(--g-edge-2)}
.ag__on{display:none}
.ag-card.is-working .ag__st{color:var(--g-teal)}
.ag-card.is-working .ag__st i{background:var(--g-teal)}
.ag-card.is-working .ag__idle{display:none}
.ag-card.is-working .ag__on{display:inline}
.ag-ceo{width:100%;max-width:520px;margin-inline:auto;padding:1rem 1.1rem;background:var(--g-ink);border-color:var(--g-ink)}
.ag-ceo .ag__ic{width:46px;height:46px;font-size:1.3rem;background:var(--g-teal);color:#fff}
.ag-ceo em{font-style:normal;font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--g-teal-l)}
.ag-ceo b{font:600 1.3rem/1.2 var(--font-display);letter-spacing:.02em;color:#fff}
.ag-ceo small{color:rgba(255,255,255,.7)}
.ag-ceo .ag__st,.ag-ceo.is-working .ag__st{color:rgba(255,255,255,.65)}
.ag-ceo.is-working .ag__ic{background:var(--g-teal-l);color:var(--g-ink)}
.ag-ceo.is-working .ag__st i{background:var(--g-teal-l)}
.ag-tree{position:relative;height:30px;margin:0 9%}
.ag-tree::before{content:"";position:absolute;left:50%;top:0;height:15px;border-left:1px solid var(--g-edge-2)}
.ag-tree::after{content:"";position:absolute;left:0;right:0;top:15px;height:15px;border:1px solid var(--g-edge-2);border-bottom:0}
.ag-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.5rem}

.crm__side{padding:1.1rem;border-left:1px solid var(--g-edge);min-width:0;display:flex;flex-direction:column;background:#FAFAFA}
.crm__h{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 .55rem;font-family:inherit;font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--g-faint)}
.crm__h span{letter-spacing:0;text-transform:none;font-weight:500}
.crm__h:not(:first-child),.crm__cust{margin-top:1.1rem}
.crm__agents{list-style:none;margin:0;padding:0;display:grid;gap:.25rem}
.agent{margin:0;position:relative;display:flex;align-items:center;gap:.65rem;width:100%;text-align:left;padding:.45rem .5rem;border-radius:var(--r);border:1px solid transparent;background:none;cursor:pointer;overflow:hidden;transition:background-color .25s,border-color .25s}
.agent:hover{background:#fff;border-color:var(--g-edge-2)}
.agent.is-focus{background:#fff;border-color:var(--g-ink)}
.agent__mono{flex:none;width:30px;height:30px;border-radius:var(--r);display:grid;place-items:center;font-size:.95rem;color:var(--g-ink);background:#fff;border:1px solid var(--g-edge-2);transition:background-color .25s,color .25s,border-color .25s}
.agent.is-working .agent__mono{background:var(--g-ink);border-color:var(--g-ink);color:#fff}
.agent__txt{min-width:0}
.agent b{display:block;font-size:.82rem;color:var(--g-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agent small{display:block;font-size:.72rem;color:var(--g-soft);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agent__bar{position:absolute;left:.5rem;right:.5rem;bottom:2px;height:2px;background:var(--g-teal);transform:scaleX(0);transform-origin:left;opacity:0}
.is-working>.agent__bar{opacity:1;transform:scaleX(1);transition:transform var(--t,1s) linear,opacity .2s}
.crm__feed{list-style:none;margin:0;padding:0;display:grid;gap:.15rem;font:400 .72rem/1.45 var(--mono);min-height:8.6rem;align-content:start}
.crm__feed li{display:grid;grid-template-columns:auto auto 1fr;gap:.5rem;align-items:baseline;padding:.22rem .4rem;border-radius:3px;animation:crmLine .45s var(--g-ease) both;transition:opacity .3s}
.crm__feed li:first-child{background:#fff;box-shadow:inset 0 0 0 1px var(--g-edge)}
@keyframes crmLine{from{opacity:0;transform:translateX(-6px)}}
.crm__feed time{color:var(--g-faint);font-variant-numeric:tabular-nums}
.crm__feed b{font-size:.62rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--g-ink)}
.crm__feed span{color:var(--g-soft);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm.is-filtered .lead__meta:not(.is-match),.crm.is-filtered .crm__feed li:not(.is-match){opacity:.3}
.crm__detail{border-radius:var(--r);background:#fff;border:1px solid var(--g-edge);padding:.85rem .9rem;font-size:.78rem;color:var(--g-soft);min-height:11rem}
.crm__detail.is-fresh{animation:crmFade .45s var(--g-ease)}
.det__empty{margin:0;color:var(--g-faint)}
.det__head{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.det__head b{color:var(--g-ink);font-size:.98rem}
.det__head span{color:var(--g-faint);font-size:.72rem}
.det__job{margin:.15rem 0 .65rem}
.det__facts{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:0 0 .65rem}
.det__facts div{padding:.45rem .6rem;border-radius:3px;background:var(--g-fill)}
.det__facts dt{font-size:.66rem;color:var(--g-faint)}
.det__facts dd{margin:.1rem 0 0;font-weight:650;color:var(--g-ink);font-variant-numeric:tabular-nums}
.det__hist{list-style:none;margin:0 0 .75rem;padding:0;display:grid;gap:.3rem}
.det__hist li{display:grid;grid-template-columns:2.6rem 1fr;gap:.4rem;padding-left:.55rem;border-left:2px solid var(--g-edge-2)}
.det__hist li:first-child{border-left-color:var(--g-ink)}
.det__hist time{color:var(--g-faint);font-variant-numeric:tabular-nums}
.det__acts .crm__btn{width:100%}
.det__note{margin:0;color:var(--g-faint)}

.crm-trade{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.4rem;margin-bottom:1rem}
.crm-trade__label{margin-right:.35rem;font-size:.85rem;font-weight:600;color:var(--g-ink)}
.crm-trade button{min-height:44px;padding:.4rem 1rem;border:1px solid rgba(14,13,12,.22);border-radius:4px;background:transparent;color:var(--g-ink);font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.crm-trade button:hover{border-color:var(--g-ink)}
.crm-trade button[aria-checked="true"]{background:var(--g-ink);border-color:var(--g-ink);color:#fff}
.crm-trade button:focus-visible{outline:2px solid var(--g-teal);outline-offset:2px}
/* Homepage audit preview: three headline checks, then the full report by email. */
.aq__status{min-height:1.4em;margin:.6rem 0 0;font-size:.9rem;color:var(--ink-3)}
.aq__status.is-error{color:#9b2a14}
.aq{margin-top:1rem}
.aq:focus{outline:none}
.aq__score{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin:0}
.aq__score b{font-size:clamp(2rem,4vw,2.6rem);line-height:1;color:var(--ink)}
.aq__score span{color:var(--ink-3)}
.aq__list{list-style:none;margin:1.1rem 0 0;padding:0;display:grid}
.aq__item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.3rem .8rem;align-items:start;padding:.8rem 0;border-bottom:1px solid var(--rule)}
.aq__dot{width:12px;height:12px;margin-top:.35rem;border-radius:50%;background:var(--c-flow,#8C6F2A)}
.aq__item.is-fail .aq__dot{background:#C0341A}
.aq__label{font-weight:600;color:var(--ink)}
.aq__detail{grid-column:2/-1;font-size:.88rem;color:var(--ink-3);overflow-wrap:anywhere}
.aq__verdict{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.aq__item.is-fail .aq__verdict{color:#9b2a14}
.aq__more{margin:1.1rem 0 0;color:var(--ink-3)}
.aq__ctas{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;margin-top:1rem}
.crm__note{text-align:center;max-width:62ch;margin-inline:auto;font-size:.85rem;color:var(--ink-3);margin-top:1rem}

@media (max-width:1100px){
  .crm__frame{grid-template-columns:minmax(0,1fr) 270px}
  .crm__rail{grid-column:1/-1;flex-direction:row;gap:.2rem;padding:.4rem .6rem;overflow-x:auto;border-right:0;border-bottom:1px solid var(--g-ink-2);scrollbar-width:none}
  .crm__rail::-webkit-scrollbar{display:none}
  .crm__rail button{width:auto;height:36px;display:flex;align-items:center;gap:.4rem;padding:0 .65rem;font-size:1rem}
  .crm__rail span,.crm__rail button:hover span,.crm__rail button:focus-visible span{position:static;opacity:1;transform:none;padding:0;background:none;color:inherit;font-size:.76rem;pointer-events:auto}
  .crm__rail button[aria-current]::before{left:.65rem;right:.65rem;top:auto;bottom:-.4rem;width:auto;height:2px}
  .crm__rail hr{display:none}
  .crm__cmd{display:none}
  .crm__top{padding-left:1rem;grid-template-columns:auto minmax(0,1fr)}
  .crm__logo{margin-left:0}
  .crm__brand{gap:.55rem}
}
@media (max-width:900px){.crm__frame{grid-template-columns:1fr}.crm__side{border-left:0;border-top:1px solid var(--g-edge)}.crm__agents{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}
@media (max-width:620px){
  .crm__crumb{display:none}
  .crm__kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .crm__kpis div:nth-child(3){border-left:0}
  .crm__kpis div:nth-child(n+3){border-top:1px solid var(--g-edge)}
  .crm__board{grid-template-columns:repeat(4,minmax(78%,1fr));overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.4rem}
  .crm__col{scroll-snap-align:start;min-height:220px}
  .crm__actions{width:100%}
  .crm__lh{display:none}
  .row{grid-template-columns:minmax(0,1fr) auto;gap:.5rem}
  .row__mid,.row__val{display:none}
  .rep{grid-template-columns:1fr}
  .crm-trade__label{width:100%;text-align:center;margin:0}
  .crm-trade button{flex:1 1 30%;padding-inline:.5rem}
}
@media (prefers-reduced-motion:reduce){
  .lead,.lead.is-new,.lead__ask,.crm__feed li,.crm__kpis dd.is-bump,.crm__detail.is-fresh,.row.is-hi,.rep.is-grow .rep__bars i,.rep__doc li.is-hi,.crm__main.is-fresh .crm__pane:not([hidden]){animation:none}
  .is-working>.agent__bar,.crm__btn,.crm[data-btn] .crm__btn{transition:none}
}
/* Myth gallery: an accordion that opens on hover, focus or tap. */
.myths{display:flex;gap:.6rem;height:clamp(360px,42vw,520px)}
.myth{position:relative;flex:1 1 0;min-width:0;border-radius:18px;overflow:hidden;background:var(--cream);text-decoration:none;color:#fff;transition:flex-grow 1s cubic-bezier(.65,0,.35,1);will-change:flex-grow;contain:paint}
.myth.is-open{flex-grow:7}
.myth img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.myth.is-open img{transform:scale(1)}
.myth::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(42,31,10,.55) 0,rgba(42,31,10,.15) 40%,transparent 70%);transition:opacity .8s ease}
.myth::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(42,31,10,.62);transition:opacity .9s ease;pointer-events:none}
.myth.is-open::before{opacity:0}
.myth__v{position:absolute;z-index:2;left:50%;bottom:1.4rem;writing-mode:vertical-rl;transform:translateX(-50%) rotate(180deg);font-family:var(--font-display);font-size:clamp(1.1rem,1.6vw,1.4rem);font-weight:500;letter-spacing:.02em;white-space:nowrap;color:#fff;transition:opacity .35s ease}
.myth.is-open .myth__v{opacity:0;transition-delay:0s}
.myth:not(.is-open) .myth__v{transition-delay:.45s}
.myth__cap{position:absolute;z-index:2;left:1rem;bottom:1rem;width:min(30rem,calc(100vw - 6rem));display:grid;gap:.35rem;padding:1rem 1.15rem 1.05rem;border-radius:14px;background:rgba(42,31,10,.78);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .6s cubic-bezier(.22,1,.36,1);pointer-events:none}
.myth.is-open .myth__cap{opacity:1;transform:none;transition-delay:.42s}
.myth__cap b{color:#fff;font-family:var(--font-display);font-size:clamp(1.3rem,2vw,1.7rem);font-weight:500;line-height:1.1}
.myth__cap span{font-size:1rem;line-height:1.45;color:#F7F6F3}
.myth__cap em{font-style:normal;font-weight:600;font-size:.9rem;color:#E2D6B9;display:inline-flex;align-items:center;gap:.3rem}
.myth:hover:not(.is-open)::before{opacity:.45}
.myth:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
@media (max-width:760px){
  .myths{height:auto;flex-direction:column}
  .myth{flex:none;height:72px;transition:height .7s cubic-bezier(.65,0,.35,1)}
  .myth.is-open{height:320px}
  .myth__v{writing-mode:horizontal-tb;transform:translateY(-50%);left:1.1rem;top:50%;bottom:auto}
  .myth__cap{left:.75rem;right:.75rem;bottom:.75rem;width:auto}
}
@media (prefers-reduced-motion:reduce){.myth,.myth img,.myth__cap,.myth__v,.myth::before{transition:none}}

/* Smoother page flow (homepage only): no hard rules between sections, tint sections fade in and out of white, slower eased reveals. */
body[data-page="home"] main .section{border-top:0}
body[data-page="home"] .section--tint{background:linear-gradient(to bottom,var(--paper) 0,var(--paper-2) clamp(3rem,8vw,6rem),var(--paper-2) calc(100% - clamp(3rem,8vw,6rem)),var(--paper) 100%)}
body[data-page="home"] [data-reveal]{transform:translateY(22px)}
body[data-page="home"] [data-reveal].in{transform:none;transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
body[data-page="home"] .card,body[data-page="home"] .btn{transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s cubic-bezier(.22,1,.36,1),background-color .25s,color .25s,border-color .25s}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}body[data-page="home"] [data-reveal]{transform:none}body[data-page="home"] [data-reveal].in{transition:none}}

/* Reviews: one long review in the middle, two matched shorter ones either side. */
.reviews{align-items:center}
.review--lead{border-color:var(--teal-200);box-shadow:0 18px 40px -24px rgba(42,31,10,.35)}
@media (min-width:62rem){.review--lead{padding-block:clamp(1.75rem,3vw,2.5rem)}}


/* Outcomes strip under the BISMO heading: every line traces to an SSOT agent or published copy. */
.outcomes{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 0 clamp(1.5rem,3vw,2.25rem);padding:0;border-top:1px solid var(--g-ink)}
.outcomes li{display:grid;gap:.35rem;align-content:start;padding:1rem 1.1rem 0 0}
.outcomes li+li{padding-left:1.1rem;border-left:1px solid var(--g-edge)}
.outcomes b{font:600 clamp(1.3rem,2.2vw,1.7rem)/1.1 var(--font-display);letter-spacing:-.02em;color:var(--g-ink)}
.outcomes span{font-size:.88rem;line-height:1.45;color:var(--g-soft)}
@media (max-width:760px){.outcomes{grid-template-columns:1fr 1fr;row-gap:1.25rem}.outcomes li:nth-child(3){padding-left:0;border-left:0}}
.crm-look{margin:1.25rem 0 .5rem}
.crm-look button{display:grid;justify-items:center;gap:.1rem;line-height:1.15}
.crm-look small{font-size:.7rem;font-weight:500;opacity:.72}

/* Whole-CRM themes. Studio is the base above. Calm (data-btn="pill"): cream, teal chrome, soft corners, lifted cards.
   Ledger (data-btn="line"): white paper, ink rules, monospace capitals, hard offset shadow. */
.crm[data-btn="pill"]{--r:10px;--g-fill:#F5F0E4;--g-fill-2:#ECE4D2;--g-edge:#E8DFCB;--g-edge-2:#D9CDB3;border-radius:20px;border-color:#E2D8C2;background:#FFFDF8;box-shadow:0 1px 2px rgba(42,31,10,.06),0 30px 60px -38px rgba(42,31,10,.5)}
.crm[data-btn="pill"] .crm__top,.crm[data-btn="pill"] .crm__rail{background:var(--g-teal);border-color:var(--g-teal-2)}
.crm[data-btn="pill"] .crm__logo{border-radius:50%;color:var(--g-teal)}
.crm[data-btn="pill"] .crm__cmd{border-radius:999px;background:rgba(255,255,255,.13);border-color:transparent;color:rgba(255,255,255,.78)}
.crm[data-btn="pill"] .crm__cmd kbd{border-color:rgba(255,255,255,.3);border-radius:999px;color:#fff}
.crm[data-btn="pill"] .crm__status{border-radius:999px;border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.85)}
.crm[data-btn="pill"][data-busy] .crm__status{background:#fff;border-color:#fff;color:var(--g-teal)}
.crm[data-btn="pill"][data-busy] .crm__status::before{background:var(--g-teal)}
.crm[data-btn="pill"] .crm__rail button{border-radius:12px;color:rgba(255,255,255,.7)!important}
.crm[data-btn="pill"] .crm__rail button:hover,.crm[data-btn="pill"] .crm__rail button[aria-current]{background:rgba(255,255,255,.16);color:#fff!important}
.crm[data-btn="pill"] .crm__rail button[aria-current]::before{background:#fff;border-radius:2px}
.crm[data-btn="pill"] .crm__rail hr{border-color:rgba(255,255,255,.22)}
.crm[data-btn="pill"] .crm__kpis{background:#fff;border-color:transparent;box-shadow:0 1px 2px rgba(42,31,10,.08)}
.crm[data-btn="pill"] .crm__col{border-radius:16px}
.crm[data-btn="pill"] .lead{border-radius:12px;border-color:transparent;box-shadow:0 1px 2px rgba(42,31,10,.08),0 8px 16px -12px rgba(42,31,10,.35)}
.crm[data-btn="pill"] .lead:hover{transform:translateY(-2px)}
.crm[data-btn="pill"] .lead.is-sel{box-shadow:0 0 0 2px var(--g-teal)}
.crm[data-btn="pill"] .tag{border-radius:999px;padding-inline:.5rem}
.crm[data-btn="pill"] .tag.is-done,.crm[data-btn="pill"] .agent.is-working .agent__mono,.crm[data-btn="pill"] .ag-card.is-working .ag__ic{background:var(--g-teal);border-color:var(--g-teal);color:#fff}
.crm[data-btn="pill"] .agent__mono{border-radius:50%}
.crm[data-btn="pill"] .crm__side{background:#FBF7EE}
.crm[data-btn="pill"] .crm__detail,.crm[data-btn="pill"] .crm__list,.crm[data-btn="pill"] .rep__box,.crm[data-btn="pill"] .ag-card{border-radius:14px}
.crm[data-btn="pill"] .rep__bars i{background:var(--g-teal);border-radius:6px 6px 0 0}
.crm[data-btn="pill"] .ag-ceo{background:var(--g-teal-2);border-color:var(--g-teal-2)}
.crm[data-btn="pill"] .ag-ceo .ag__ic{background:#fff;color:var(--g-teal)}

.crm[data-btn="line"]{--r:0px;--g-fill:#fff;--g-fill-2:#F2F2F1;--g-edge:#0E0D0C;--g-edge-2:#0E0D0C;border-radius:0;border-width:2px;background:#fff;box-shadow:8px 8px 0 var(--g-ink)}
.crm[data-btn="line"] .crm__top{background:#fff;color:var(--g-ink);border-bottom:2px solid var(--g-ink)}
.crm[data-btn="line"] .crm__brand b,.crm[data-btn="line"] .crm__crumb [data-crm-crumb]{color:var(--g-ink)}
.crm[data-btn="line"] .crm__crumb{color:var(--g-faint);font:500 .72rem var(--mono);text-transform:uppercase}
.crm[data-btn="line"] .crm__logo{border-radius:0;background:var(--g-ink);color:#fff}
.crm[data-btn="line"] .crm__cmd{background:#fff;border-color:var(--g-ink);color:var(--g-faint);font:500 .74rem var(--mono)}
.crm[data-btn="line"] .crm__cmd kbd{border-radius:0;border-color:var(--g-ink);color:var(--g-ink)}
.crm[data-btn="line"] .crm__status{border-color:var(--g-ink);color:var(--g-ink);font:600 .66rem var(--mono);letter-spacing:.06em;text-transform:uppercase}
.crm[data-btn="line"] .crm__status::before{border-radius:0;background:var(--g-ink)}
.crm[data-btn="line"][data-busy] .crm__status{background:var(--g-ink);color:#fff}
.crm[data-btn="line"][data-busy] .crm__status::before{background:#fff}
.crm[data-btn="line"] .crm__rail{background:#fff;border-right:2px solid var(--g-ink)}
.crm[data-btn="line"] .crm__rail button{color:var(--g-soft)!important}
.crm[data-btn="line"] .crm__rail button:hover{background:var(--g-fill-2);color:var(--g-ink)!important}
.crm[data-btn="line"] .crm__rail button[aria-current]{background:var(--g-ink);color:#fff!important}
.crm[data-btn="line"] .crm__rail button[aria-current]::before{display:none}
.crm[data-btn="line"] .crm__rail hr{border-color:var(--g-ink)}
.crm[data-btn="line"] .crm__title h3{font:700 1.02rem var(--mono);text-transform:uppercase;letter-spacing:.04em}
.crm[data-btn="line"] .crm__kpis{border-width:2px}
.crm[data-btn="line"] .crm__kpis dd{font-size:1.45rem}
.crm[data-btn="line"] .crm__col{background:none;border:1px solid var(--g-ink)}
.crm[data-btn="line"] .crm__col header{padding-bottom:.45rem;border-bottom:1px solid var(--g-ink);text-transform:uppercase;font-family:var(--mono);letter-spacing:.03em}
.crm[data-btn="line"] .lead{border-radius:0;border-color:var(--g-ink)}
.crm[data-btn="line"] .lead:hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--g-ink)}
.crm[data-btn="line"] .lead.is-sel{box-shadow:3px 3px 0 var(--g-teal);border-color:var(--g-teal)}
.crm[data-btn="line"] .lead__name{font:700 .74rem var(--mono);text-transform:uppercase;letter-spacing:.03em}
.crm[data-btn="line"] .tag{border-radius:0;font-family:var(--mono);text-transform:uppercase;letter-spacing:.03em}
.crm[data-btn="line"] .agent__mono,.crm[data-btn="line"] .ag__ic,.crm[data-btn="line"] .det__facts div,.crm[data-btn="line"] .crm__feed li{border-radius:0}
.crm[data-btn="line"] .crm__side{background:#fff;border-left:2px solid var(--g-ink)}
.crm[data-btn="line"] .crm__h{font-family:var(--mono)}
.crm[data-btn="line"] .row{border-top-color:#CFCCC9}
.crm[data-btn="line"] .crm__lh{background:var(--g-ink);color:#fff}
.crm[data-btn="line"] .rep__bars i{border:1px solid var(--g-ink);border-radius:0;background:repeating-linear-gradient(45deg,var(--g-ink) 0 2px,transparent 2px 6px)}
@media (max-width:1100px){.crm[data-btn="line"] .crm__rail{border-right:0;border-bottom:2px solid var(--g-ink)}}
@media (max-width:900px){.crm[data-btn="line"] .crm__side{border-left:0;border-top:2px solid var(--g-ink)}.crm[data-btn="line"]{box-shadow:5px 5px 0 var(--g-ink)}}

/* Founders: larger 4:5 portraits, photo column takes the wider share on desktop. */
.founder__shot.shot--face{aspect-ratio:4 / 5}
@media (min-width:1101px){.founders__grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
@media (min-width:701px) and (max-width:1100px){.founders__grid{grid-template-columns:minmax(0,1fr)}.founders__text{max-width:44rem}}

/* BISMO section: everything under the heading reads centred. */
#bismo-demo .section-head,#bismo-demo .section-head p{text-align:center;margin-inline:auto}
.outcomes li{justify-items:center;text-align:center}
#bismo-demo .crm__note{text-align:center;margin-inline:auto}

/* Experiment 31 Oct: brass second accent, engineered agent systems, font fixes */
:root{--brass:#93380B;--brass-2:#F86A1A;--brass-soft:#FBD3BC;--brass-on-dark:#FF8A45}
[data-theme="dark"]{--brass:#FF8A45;--brass-2:#F86A1A;--brass-soft:rgba(248,106,26,.16);--brass-on-dark:#FF8A45}
.systems{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.9rem,2vw,1.25rem);margin:0 0 clamp(1.75rem,3.5vw,2.75rem)}
.sys{display:grid;gap:.9rem;align-content:start;padding:clamp(1.1rem,2.2vw,1.5rem);border:1px solid var(--g-edge);border-radius:16px;background:var(--paper);text-align:left}
.sys header{display:grid;gap:.55rem}
.sys h3{margin:0;font:500 clamp(1.25rem,2vw,1.55rem)/1.1 var(--font-display);letter-spacing:-.02em;color:var(--g-ink)}
.sys__wires{display:flex;flex-wrap:wrap;margin:0}
.sys__wires span{font:600 .74rem/1.3 var(--font-body);letter-spacing:.04em;color:var(--brass)}
.sys__wires span+span::before{content:"/";margin:0 .45em;color:var(--xg-faint,#6A635A)}
.sys ol{list-style:none;counter-reset:step;margin:0;padding:0;display:grid;gap:.5rem}
.sys li{counter-increment:step;display:grid;grid-template-columns:1.6rem minmax(0,1fr);gap:.6rem;align-items:baseline;font-size:.95rem;line-height:1.45;color:var(--g-soft)}
.sys li::before{content:counter(step,decimal-leading-zero);font:600 .74rem/1.9 var(--font-body);color:var(--brass)}
@media (max-width:760px){.systems{grid-template-columns:minmax(0,1fr)}}
.myth__cap em{color:var(--brass-on-dark)}
.qf-est__save{color:var(--brass-on-dark)}
body .px-preferences{font-family:var(--font-body)}
.crm__kpis dd{font-weight:600}

/* 1 Nov 2026 (Jack): exactly two lines, "Connecting your business" / "to the power of AI"; the first line is ~11.6em, so phones scale the type to fit */.creation__h{font-size:min(clamp(2.1rem,4.7vw,4.3rem),max(1.25rem,calc((100vw - 2.5rem)/11.9)))}.creation__h span{white-space:nowrap}

/* 1 Nov 2026 (Jack: "the animation is blurry, then it snaps into focus and looks glitchy and cheap").
   The video clip is gone. The sharp art itself now inks in: it starts as a faint underdrawing and the ink
   spreads out from the touching fingertips (about 50.5% across, 45% down the art) until both arms are whole.
   Nothing is swapped, so nothing changes focus at the end. Browsers without @property or masks show the art. */
@property --creation-ink{syntax:"<length-percentage>";inherits:false;initial-value:120%}
.creation__img--l,.creation__img--r{
  transform:none;opacity:1;
  -webkit-mask-image:radial-gradient(circle at 50.5% 45%,#000 var(--creation-ink),rgba(0,0,0,.07) calc(var(--creation-ink) + 22%));
  mask-image:radial-gradient(circle at 50.5% 45%,#000 var(--creation-ink),rgba(0,0,0,.07) calc(var(--creation-ink) + 22%));
  animation:inkIn 2.8s cubic-bezier(.33,0,.15,1) .3s both}
@keyframes inkIn{from{--creation-ink:-22%}to{--creation-ink:120%}}
@media (prefers-reduced-motion:reduce){.creation__img--l,.creation__img--r{animation:none;--creation-ink:120%}}

/* 1 Nov 2026 (Jack: "make it flow, less blocky"). Section colours run into each other instead of stepping:
   white founders fade into the mustard band, the mustard runs straight into the beige price section, and
   "Can AI find your business" plus "From first chat" share one beige run. Palette: orange, beige, mustard,
   chocolate, white, cream, black. */
body[data-page="home"]{--fade:clamp(4rem,9vw,7.5rem)}
.intro--creation{border-bottom:0}.intro--creation::after{height:var(--fade,clamp(2rem,4vw,3rem))}
body[data-page="home"] #what{background:linear-gradient(to bottom,var(--cream) 0,color-mix(in srgb,#D4A94F 10%,var(--cream)) calc(var(--fade) * 0.2),color-mix(in srgb,#D4A94F 35%,var(--cream)) calc(var(--fade) * 0.4),color-mix(in srgb,#D4A94F 65%,var(--cream)) calc(var(--fade) * 0.6),color-mix(in srgb,#D4A94F 90%,var(--cream)) calc(var(--fade) * 0.8),#D4A94F var(--fade))!important}
body[data-page="home"] #quote{background:linear-gradient(to bottom,#D4A94F 0,#D4A94F calc(100% - var(--fade)),color-mix(in srgb,var(--paper) 10%,#D4A94F) calc(100% - var(--fade) * 0.8),color-mix(in srgb,var(--paper) 35%,#D4A94F) calc(100% - var(--fade) * 0.6),color-mix(in srgb,var(--paper) 65%,#D4A94F) calc(100% - var(--fade) * 0.4),color-mix(in srgb,var(--paper) 90%,#D4A94F) calc(100% - var(--fade) * 0.2),var(--paper) 100%);border-top:0}
body[data-page="home"] #audit{background:linear-gradient(to bottom,var(--paper) calc(var(--fade) * 0.0),color-mix(in srgb,var(--paper-2) 10%,var(--paper)) calc(var(--fade) * 0.2),color-mix(in srgb,var(--paper-2) 35%,var(--paper)) calc(var(--fade) * 0.4),color-mix(in srgb,var(--paper-2) 65%,var(--paper)) calc(var(--fade) * 0.6),color-mix(in srgb,var(--paper-2) 90%,var(--paper)) calc(var(--fade) * 0.8),var(--paper-2) calc(var(--fade) * 1.0));border-bottom:0}
body[data-page="home"] #how{background:linear-gradient(to bottom,var(--paper-2) calc(100% - var(--fade) * 1.0),color-mix(in srgb,var(--paper) 10%,var(--paper-2)) calc(100% - var(--fade) * 0.8),color-mix(in srgb,var(--paper) 35%,var(--paper-2)) calc(100% - var(--fade) * 0.6),color-mix(in srgb,var(--paper) 65%,var(--paper-2)) calc(100% - var(--fade) * 0.4),color-mix(in srgb,var(--paper) 90%,var(--paper-2)) calc(100% - var(--fade) * 0.2),var(--paper) calc(100% - var(--fade) * 0.0));border-top:0}

/* The service links on the myth cards in the logo's orange. */
.myths-section .myth .myth__cap em{color:#F7F1E5!important}.myths-section .myth .myth__cap em i{color:#F86A1A!important}

/* Founders: the heading's top meets the photos' top and the award badge's bottom meets the bios' bottom. */
@media (min-width:62rem){
  .founders__text{justify-content:space-between}
  .founders__text .nomination-badge{margin-top:1rem}
}
.founders__lede + .founders__lede{margin-top:.75rem}
@media (min-width:62rem) and (max-width:84.99rem){.founders__text .founders__lede{font-size:.9375rem}}
/* 1 Nov 2026 (Jack: no paper edges, fill the card, consistent). The myth art is now trimmed of its paper and
   table edges and re-inked in one chocolate-on-cream duotone, so every card is the drawing edge to edge.
   Focal points keep each figure in frame when a card crops tightly. */
.myth img{background:#F7F1E5}
.myth[href="/marketing"] img{object-position:30% 50%}
.myth[href="/websites"] img{object-position:62% 50%}
/* The closed cards' names were painted chocolate by the section's text rule and vanished into the dark veil. */
.myths-section .myth .myth__v{color:#F7F1E5!important}
/* 1 Nov 2026 (Jack): founders now sit above the BISMO demo, with an arrow leading on to it. */
.founders__next{grid-column:1/-1;justify-self:center;display:flex;width:fit-content;max-width:100%;text-align:center;margin:clamp(2rem,4vw,3rem) auto 0;align-items:center;gap:.5rem;
  font-family:var(--font-display);font-size:clamp(1.15rem,1.8vw,1.4rem);color:var(--ink);text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:.2rem}
.founders__next i{color:#F86A1A;animation:nextBob 2.4s ease-in-out infinite}
.founders__next:hover{color:#B4460F}
@keyframes nextBob{50%{transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){.founders__next i{animation:none}}
.myth--intro .myth__cap{width:min(34rem,calc(100vw - 6rem))}
@media (max-width:47.5rem){.myth--intro .myth__cap em i{transform:rotate(90deg)}}
/* 1 Nov 2026 (Jack): no white band between the cream hero and the mustard gallery. */
body[data-page="home"] .intro--creation::after{background:linear-gradient(to bottom,transparent,var(--cream))}