/* werchota-web.css — company-website components, v1 (21 Oct 2026). Load AFTER werchota.css.
   Shipped with every site: keep client names out of these comments. */
:root{--sage:#7f9c9a;--sage-2:#e9efee;--ink-2:#53626e}

/* ---------- section rhythm ---------- */
.sx{padding:64px 0}.sx.tight{padding:40px 0}
.sx.soft{background:var(--soft)}.sx.cream{background:var(--cream)}.sx.white{background:#fff}
.sx.navy{background:var(--navy);color:var(--on-navy)}
.sx.navy h1,.sx.navy h2,.sx.navy h3,.sx.navy h4{color:#fff}.sx.navy .kick{color:var(--accent-on-navy)}.sx.navy .lead,.sx.navy p{color:var(--on-navy-muted)}
.sx.navy a:not(.btn){color:var(--accent-on-navy)}
.sx-head{max-width:760px;margin:0 0 28px}.sx-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sx-head h2{margin-top:8px}
@media(max-width:640px){.sx{padding:44px 0}}

/* ---------- hello bar + header ---------- */
.hellobar{background:var(--accent-strong);text-align:center;padding:8px 16px}
.hellobar a{color:#fff;font-weight:800;font-size:14px;text-decoration:none}.hellobar a:hover{text-decoration:underline}
.site-hd{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-hd .wrap{display:flex;align-items:center;gap:14px;min-height:64px;max-width:1240px}
.logo{font-weight:900;font-size:22px;color:var(--navy);text-decoration:none;letter-spacing:-.02em;white-space:nowrap}.logo b{color:var(--accent)}
.site-nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.site-nav>a,.dd-t{display:inline-flex;align-items:center;gap:4px;padding:9px 9px;border-radius:var(--pill);color:var(--ink);text-decoration:none;font:700 14.5px var(--font);background:none;border:0;cursor:pointer;white-space:nowrap}
.hd-btn .btn{white-space:nowrap;min-height:42px;padding:9px 16px;font-size:15px}
.site-nav>a:hover,.dd-t:hover,.dd-t[aria-expanded=true],.site-nav>a[aria-current=page]{background:var(--soft)}
.dd-t:after{content:"";width:7px;height:7px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px);margin-left:4px}
.dd{position:relative}
.dd-p{position:absolute;left:0;top:calc(100% + 8px);min-width:260px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:0 16px 40px rgba(7,33,54,.14);padding:10px;display:none;z-index:70}
.dd-p.on{display:block}
.dd-p .grp+.grp{border-top:1px solid var(--line);margin-top:8px;padding-top:8px}
.dd-p .grp-t{display:block;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:4px 10px}
.dd-p a,.dd-p span.na{display:block;padding:8px 10px;border-radius:10px;text-decoration:none;color:var(--navy);font-weight:800}
.dd-p a:hover{background:var(--soft)}
.dd-p small{display:block;font-weight:600;color:var(--muted);font-size:13px}
.dd-p span.na{color:var(--muted);cursor:default}
.hd-btn{margin-left:8px}
.burger{display:none;margin-left:auto;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:#fff;cursor:pointer;position:relative}
.burger span,.burger:before,.burger:after{content:"";position:absolute;left:12px;right:12px;height:2px;background:var(--navy);border-radius:2px}
.burger span{top:21px}.burger:before{top:14px}.burger:after{top:28px}
@media(max-width:1100px){
  .burger{display:block}
  .site-hd .wrap{flex-wrap:wrap}
  .site-nav{display:none;width:100%;flex-direction:column;align-items:stretch;padding:8px 0 14px;margin:0}
  .site-nav.open{display:flex}
  .site-nav>a,.dd-t{width:100%;justify-content:space-between;border-radius:10px;padding:12px}
  .dd-p{position:static;box-shadow:none;border:0;padding:0 0 0 10px;min-width:0}
  .hd-btn{margin:8px 0 0;width:100%}
}

/* ---------- heroes ---------- */
.hero2{padding:56px 0 44px}
.hero2 .grid-h{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:36px;align-items:center}
.hero2.center .grid-h{grid-template-columns:1fr;text-align:center}.hero2.center .lead{margin-left:auto;margin-right:auto}.hero2.center .btns{justify-content:center}
.hero2 h1{font-size:clamp(34px,6.2vw,62px);margin:10px 0 14px}
.hero2 .lead{max-width:36em}
.hero2 .media img,.hero2 .media video{display:block;width:100%;border-radius:var(--r);object-fit:cover}
.hero2.dark{background:var(--navy);color:var(--on-navy)}.hero2.dark h1{color:#fff}.hero2.dark .lead{color:var(--on-navy-muted)}.hero2.dark .kick{color:var(--accent-on-navy)}
.hero2.dark .btn.ghost{background:transparent;color:#fff;border-color:#fff}.hero2.dark .btn.ghost:hover{background:#fff;color:var(--navy)}
@media(max-width:860px){.hero2 .grid-h{grid-template-columns:1fr;gap:22px}}
.rot{display:block}.rot>span{display:none}.rot>span.on{display:block;animation:rotin .5s ease}
@keyframes rotin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hero-cards{display:grid;gap:10px;margin-top:22px}
.hcard{display:flex;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;text-decoration:none;color:var(--navy);font-weight:800;box-shadow:var(--shadow-sm)}
a.hcard:hover{border-color:var(--accent)}
.hcard img{width:36px;height:36px;flex:none}
.hcard small{display:inline-block;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;background:var(--accent-tint);color:var(--accent-deep);border-radius:var(--pill);padding:2px 8px;margin-bottom:3px}
.hero2.dark .hcard{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff}
.hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.hero2.center .hero-tags{justify-content:center}
.hero-tags .pill{margin:0;padding:6px 14px;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.hero2.dark .hero-tags .pill{background:rgba(255,255,255,.1);color:#fff}

/* ---------- stats, logos, text bands ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:26px}
.stats div{background:var(--soft);border-radius:var(--r-md);padding:16px 18px}
.stats b{display:block;font-size:clamp(28px,5vw,40px);font-weight:900;color:var(--navy);line-height:1.05;letter-spacing:-.02em}
.stats span{display:block;color:var(--muted);font-weight:700;margin-top:4px}
.sx.navy .stats div{background:rgba(255,255,255,.06)}.sx.navy .stats b{color:#fff}
.logos{display:flex;flex-wrap:wrap;gap:22px 36px;align-items:center;justify-content:center}
.logos img{height:38px;width:auto;max-width:150px;object-fit:contain;filter:grayscale(1);opacity:.75}
.logos img:hover{filter:none;opacity:1}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee .track{display:flex;gap:44px;width:max-content;animation:mq 40s linear infinite;align-items:center}
.marquee:hover .track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.tband{overflow:hidden;padding:18px 0;background:var(--navy)}
.tband .track{display:flex;gap:40px;width:max-content;animation:mq 30s linear infinite}
.tband span{font-size:clamp(28px,5vw,54px);font-weight:900;letter-spacing:-.02em;color:#fff;white-space:nowrap;text-transform:uppercase}
.tband span:after{content:"✦";color:var(--accent);margin-left:40px}
.tband.sage{background:var(--sage)}.tband.sage span{color:var(--navy)}.tband.sage span:after{color:#fff}
@media(prefers-reduced-motion:reduce){.marquee .track,.tband .track{animation:none;flex-wrap:wrap;width:auto}.marquee{-webkit-mask-image:none;mask-image:none}}

/* ---------- statement, quotes, testimonials ---------- */
.statement p{font-size:clamp(26px,4.4vw,44px);line-height:1.18;font-weight:900;color:#fff;letter-spacing:-.02em;margin:0 0 10px;max-width:22em}
.statement p em{font-style:normal;color:var(--accent-on-navy)}
.person{display:flex;gap:14px;align-items:center;margin-top:26px}
.person img{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none;border:3px solid var(--accent)}
.person b{display:block;color:inherit;font-size:17px}.person span{color:var(--muted);font-size:15px}
.sx.navy .person span{color:var(--on-navy-muted)}
.pull{font-size:clamp(20px,2.6vw,26px);font-weight:800;color:var(--navy);border-left:4px solid var(--accent);padding-left:18px;max-width:40em}
.badges{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:0 0 22px}
.badge-card{display:flex;gap:14px;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;font-weight:800;color:var(--navy)}
.badge-card .lg{display:flex;gap:10px;align-items:center}.badge-card img{height:34px;width:auto;max-width:120px}
.slider{position:relative}
.slider .track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,calc((100% - 32px)/3));gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;scrollbar-width:thin}
@media(max-width:900px){.slider .track{grid-auto-columns:minmax(270px,85%)}}
.slider .track>*{scroll-snap-align:start}
.slider-nav{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}
.slider-nav button{width:44px;height:44px;border-radius:50%;border:2px solid var(--navy);background:#fff;color:var(--navy);font:900 18px var(--font);cursor:pointer}
.slider-nav button:hover{background:var(--navy);color:#fff}
.tm{display:flex;flex-direction:column;gap:12px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow-sm)}
.tm blockquote{margin:0;font-size:16.5px;line-height:1.55;color:var(--ink)}
.tm blockquote:before{content:"“";display:block;font-size:46px;line-height:.6;color:var(--accent);font-weight:900;margin-bottom:6px}
.tm .who{display:flex;gap:12px;align-items:center;margin-top:auto}
.tm .who img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.tm .who b{display:block;color:var(--navy)}.tm .who span{font-size:14px;color:var(--muted)}
.tm video{border-radius:var(--r-sm);aspect-ratio:16/9;background:#000}

/* ---------- split, before/after, steps ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.split.reverse .split-media{order:-1}
.split-media img,.split-media video{display:block;width:100%;border-radius:var(--r);object-fit:cover}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:22px}.split.reverse .split-media{order:0}}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ba>div{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.ba h3{font-size:15px;letter-spacing:.1em;text-transform:uppercase}
.ba .after{border-color:var(--accent-line);background:var(--accent-wash)}
@media(max-width:760px){.ba{grid-template-columns:1fr}}
.steps-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;counter-reset:st}
.steps-row>div{counter-increment:st;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;position:relative}
.steps-row>div:before{content:"Step " counter(st);display:inline-block;font-size:12.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--accent-strong);border-radius:var(--pill);padding:3px 10px;margin-bottom:10px}
.steps-row img{display:block;max-width:100%;margin-top:10px}

/* ---------- cards extras, pricing, team ---------- */
.card .bul{list-style:none;padding:0;margin:8px 0 0}.card .bul li{position:relative;padding:4px 0 4px 22px;font-size:15.5px;color:var(--ink)}
.card .bul li:before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:900}
.card .ico{width:44px;height:44px;object-fit:contain;margin-bottom:4px}
.card .more{margin-top:auto;padding-top:8px}
.prices{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;align-items:stretch}
.price{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
.price.hi{border:2px solid var(--accent);box-shadow:0 18px 40px rgba(210,100,10,.14)}
.price .amt{font-size:clamp(30px,5vw,44px);font-weight:900;color:var(--navy);letter-spacing:-.02em;line-height:1}
.price .note{color:var(--muted);font-size:15px}
.price ul{list-style:none;padding:0;margin:8px 0 12px}.price li{padding:5px 0 5px 24px;position:relative}.price li:before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:900}
.price .btn{margin-top:auto}
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
.member{text-align:left}
.member img,.member .ph-asset{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r);background:var(--soft);min-height:0}
.member h3{margin:10px 0 2px;font-size:17px}.member p{margin:0;color:var(--muted);font-size:14.5px}
.member .links{gap:6px 12px;margin-top:6px;font-size:14px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.gallery img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-sm)}

/* ---------- embeds ---------- */
.embed{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:#000}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.spotify iframe{width:100%;height:352px;border:0;border-radius:12px}
.spotify.video iframe{height:480px}
.yt-facade{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border:0;padding:0;cursor:pointer;background:#000 center/cover no-repeat}
.yt-facade:before{content:"";width:76px;height:76px;border-radius:50%;background:var(--accent-strong);box-shadow:0 6px 24px rgba(0,0,0,.35)}
.yt-facade:after{content:"";position:absolute;border-left:24px solid #fff;border-top:15px solid transparent;border-bottom:15px solid transparent;margin-left:6px}
.yt-facade span{position:absolute;bottom:12px;left:12px;right:12px;color:#fff;font-size:13px;text-shadow:0 1px 3px #000}
.form-embed iframe{width:100%;border:0;border-radius:var(--r);background:#fff;min-height:640px}

/* ---------- CTA block ---------- */
.cta-block{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px;align-items:center;background:var(--navy);color:#fff;border-radius:24px;padding:40px;position:relative;overflow:hidden}
.cta-block:before{content:"";position:absolute;right:-140px;top:-140px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(210,100,10,.35),transparent 70%)}
.cta-block>*{position:relative}
.cta-block .kick{color:var(--accent-on-navy)}.cta-block h2{color:#fff;font-size:clamp(28px,4.6vw,44px);font-weight:900;margin:8px 0 18px}
.cta-side{background:#fff;color:var(--navy);border-radius:var(--r);padding:20px}
.cta-side h3{font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cta-side .person{margin-top:10px}.cta-side .person span{color:var(--muted)}
.cta-side .links{margin-top:12px}
@media(max-width:820px){.cta-block{grid-template-columns:1fr;padding:28px 22px}}

/* ---------- lists: posts + episodes ---------- */
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:18px}
.post-card .th{aspect-ratio:16/10}
.post-card .meta,.ep-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px;color:var(--muted);font-weight:700}
.post-card .meta span+span:before,.ep-meta span+span:before{content:"✦";color:var(--accent);margin-right:14px;font-size:11px}
.ep-list{display:grid;gap:12px}
.ep{display:grid;grid-template-columns:76px minmax(0,1fr);gap:16px;align-items:start;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;text-decoration:none;color:var(--ink)}
a.ep:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.ep .no{font-weight:900;font-size:26px;color:var(--accent-strong);line-height:1.1}.ep .no small{display:block;font-size:12px;color:var(--muted);letter-spacing:.1em}
.ep h3{margin:0 0 4px;font-size:18px}.ep p{margin:6px 0 0;color:var(--muted);font-size:15.5px}
.ep-thumb{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:14px}
.ep-thumb a{display:block;text-decoration:none;color:var(--navy);font-weight:800}
.ep-thumb img,.ep-thumb .ph-asset{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-sm);margin-bottom:8px;min-height:0}
.lang-switch{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--navy)}
.lang-switch button{border:2px solid var(--line);background:#fff;border-radius:var(--pill);padding:5px 14px;font:800 14px var(--font);color:var(--navy);cursor:pointer}
.lang-switch button[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
html.js [data-lang-block]:not(.on){display:none}
.listen{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-weight:800;color:var(--navy)}
.sort{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
.sort select,.sort input{padding:9px 14px;border:2px solid var(--line);border-radius:var(--pill);font:15px var(--font);color:var(--ink);background:#fff}
.sort input{min-width:min(320px,100%)}

/* ---------- article + long text ---------- */
.prose{font-size:17.5px;line-height:1.7;color:var(--ink);max-width:760px}
.prose h2{font-size:clamp(23px,3.4vw,30px);margin:34px 0 10px}.prose h3{font-size:21px;margin:26px 0 8px}.prose h4{font-size:18px;margin:20px 0 6px}
.prose p{margin:0 0 14px}.prose ul,.prose ol{margin:0 0 16px;padding-left:24px}.prose li{margin:5px 0}
.prose img{display:block;max-width:100%;height:auto;border-radius:var(--r-sm);margin:16px 0}
.prose blockquote{margin:16px 0;padding:10px 18px;border-left:4px solid var(--accent);background:var(--cream);border-radius:0 10px 10px 0}
.prose iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r-sm)}
.prose table{border-collapse:collapse;width:100%;font-size:15px}.prose th,.prose td{border-bottom:1px solid var(--line);padding:8px;text-align:left;vertical-align:top}
.prose a{word-break:break-word}
.art-head{padding:44px 0 18px}.art-head h1{font-size:clamp(30px,5vw,50px);margin:12px 0 0;max-width:22em}
.art-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:40px;align-items:start}
.toc-side{position:sticky;top:90px;background:var(--soft);border-radius:var(--r);padding:16px 18px}
.toc-side h2{font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.toc-side a{display:block;padding:6px 0;font-weight:700;text-decoration:none;color:var(--navy);font-size:15px;line-height:1.35;border-top:1px solid var(--line)}
.toc-side a:first-of-type{border-top:0}.toc-side a:hover{color:var(--accent-deep)}
.summary{background:var(--cream);border-radius:var(--r);padding:18px 22px;margin:0 0 28px}
.summary h2{font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
@media(max-width:900px){.art-grid{grid-template-columns:1fr}.toc-side{position:static;order:-1}}
.join{margin:34px 0 0;background:var(--navy);color:#fff;border-radius:var(--r);padding:26px 28px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.join h2{color:#fff;font-size:clamp(21px,3vw,28px);margin:0;flex:1 1 320px}

/* ---------- popup form dialog ---------- */
.dlg{position:fixed;inset:0;z-index:300;background:rgba(5,24,41,.72);display:none;align-items:center;justify-content:center;padding:16px}
.dlg.on{display:flex}
.dlg-box{position:relative;width:min(720px,100%);height:min(86vh,820px);background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.dlg-box iframe{width:100%;height:100%;border:0}
.dlg-x{position:absolute;top:10px;right:10px;z-index:2;width:42px;height:42px;border-radius:50%;border:0;background:var(--navy);color:#fff;font:900 18px var(--font);cursor:pointer}

/* ---------- footer ---------- */
.site-ft{background:var(--soft);border-top:1px solid var(--line);padding:44px 0 30px;margin-top:0;font-size:15px;color:var(--muted)}
.site-ft .ft-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:start}
.site-ft .ft-logo img{height:34px;width:auto}.site-ft .ft-logo p{margin:10px 0 0;font-weight:700;color:var(--navy)}
.site-ft nav{display:flex;flex-wrap:wrap;gap:8px 22px}.site-ft nav a{color:var(--navy);font-weight:800;text-decoration:none}.site-ft nav a:hover{color:var(--accent-deep)}
.site-ft .ft-bot{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;border-top:1px solid var(--line);margin-top:26px;padding-top:16px}
.site-ft .ft-bot a{color:var(--muted)}
.site-ft .social{display:flex;gap:10px;margin-top:14px}.site-ft .social a{font-weight:800;color:var(--navy)}
@media(max-width:760px){.site-ft .ft-top{grid-template-columns:1fr}}
@media print{.hellobar,.site-hd,.site-ft,.dlg,.slider-nav{display:none!important}}